将模板添加到 D3答案

【问题标题】：Adding templating to D3将模板添加到 D3
【发布时间】：2013-02-23 22:11:12
【问题描述】：

http://bl.ocks.org/JohnBerryman/2295155

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

不幸的是，我从来没有对此进行过很好的测试并向博斯托克先生提交拉取请求。

问题：

我还是 D3 的新手。这是否可以在 D3 中完成，我只是不知道。
这通常有用吗？是否值得提交拉取请求？
是 d3 风格的吗？这里的代码是否代表适合 d3 的代码？

【问题讨论】：

标签： d3.js templating

【解决方案1】：

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

My solution on bl.ocks

D3 Templating Plugin

【讨论】：

我发现true 作为ich.head(d, true) 的第二个参数是不需要的。

【解决方案2】：

我没有专门与 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 传递到 ich 模板中会导致不良行为，否则我很确定您会获得相同的结果。

如果将i 传递到 ich 模板有问题，解决方法是

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

【讨论】：

这似乎是个好主意，但我在尝试时会出错。 Uncaught TypeError: Object [object Array] has no method 'html'
@JohnBerryman 我的错...忘记了在调用 .html() 之前需要附加一个元素。我修改了我的代码以显示这一点。我想这就是区别：您对 D3 的修改消除了添加节点（和“头”类）的需要。尽管如此，我仍然不认为修改 D3 是合理的，但你可以和博斯托克先生一起讨论 :)

【解决方案3】：

@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 +')'});

注意“true”参数，它告诉 ICH 返回 HTML 而不是对象。

【讨论】：