向D3添加模板

http://bl.ocks.org/JohnBerryman/2295155 向D3添加模板

这是我试图向D3添加模板的尝试。我在Inkscape中绘制了原始面部，然后将SVG转换为iCanHaz模板，并使模板变量对应于面部测量。这样我就可以定义一张脸部（以及其他任何扩展），并且我可以轻松实例化脸部，甚至通过更新绑定到脸部对象的数据来更改脸部。代码的第一部分（如果你滚过该演示）是D3的补丁，然后代码的其余部分使用该补丁。

不幸的是，我从来没有对此做过很好的测试，并向Bostock先生提交了请求。

问题：

我还是新来D3。这是否可以在D3中完成，我只是不知道。
这通常有用吗？值得提交拉请求吗？
它是d3-esque？这里的代码是否代表适用于d3的代码？

来源

2013-02-23 JnBrymn

@meetamit是正确的方式，但你必须使用polyfill在SVG上应用d3.select.html方法。此方法使用innerHTML，并且在SVG元素上不受支持。检查 d3.select.html reference

My solution on bl.ocks

来源

2013-11-06 01:10:19 jkutianski

我发现'真'作为'ich.head（d，真）'的第二个参数不是需要。 – jkutianski 2013-11-07 06:36:59

我还没有专门与ICanHaz合作过（尽管模板一般工作很多），所以我可能会失去一些至关重要的东西。但是，在我看来，扩展D3对此没有必要。

考虑到编译模板（ICH或其他方式）仅仅是返回的HTML功能，你可能只是这样做：

vis.selectAll('.head').data(data) 
    .enter() 
    .append('g') 
    .attr('class', 'head') 
    .html(ich.head) // <--- THIS 
    .attr('transform',function(d) {return 'translate('+ d.x +' '+ d.y +')'});

这将调用ich.head的每一个元素，传递d和i。所以除非i进入一个模板导致不良行为，否则我相信你会得到相同的结果。

如果通过i将进入ICH模板是一个问题，解决方法是

.html(function(d,i) { return ich.head(d); })

来源

2013-02-25 18:59:36 meetamit

这似乎是个好主意，但我得到的错误，当我尝试它。 'Uncaught TypeError：Object [object Array] has no method'html'' – JnBrymn 2013-02-25 19:53:41

@JohnBerryman我的坏...忘了你需要在调用'.html（）'之前追加一个元素。我修改了我的代码以显示此内容。我想其中的区别在于：您对D3的修改不需要添加节点（和“head”类）。尽管如此，我仍然认为它没有理由修改D3，但你可以把它与Bostock先生:) – meetamit 2013-02-25 20:05:25

@ meetamit的答案是大多正确。然而，为了使这项工作正常，我不得不使用iCanHaz模板的原始的HTML输出，它需要一个略有不同的呼叫ICH：

vis.selectAll('.head').data(data) 
.enter() 
.append('g') 
.attr('class', 'head') 
.html(function(d){ return ich.head(d, true); }) // <--- THIS 
.attr('transform',function(d) {return 'translate('+ d.x +' '+ d.y +')'});

通知“真正”的参数，它告诉ICH返回HTML而不是对象。

来源

2013-10-18 19:13:11

向D3添加模板

回答

相关问题