Question

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

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

不幸的是，我没有对此进行过很好的测试，并向Bostock先生提交拉动请求。

问题：

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

Answer 1

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

My solution on bl.ocks

Answer 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); })

Answer 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而不是对象。

添加模板到D3

3 个答案: