3

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

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

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

问题：

  1. 我还是 D3 的新手。这是不是可以在 D3 中完成的事情，我只是不知道。
  2. 这一般有用吗？是否值得提交拉取请求？
  3. 是d3式的吗？这里的代码是否代表适合 d3 的代码？
4

3 回答 3

4

@meetamit 方法正确，但您必须使用 polyfilld3.select.html在 SVG 上应用方法。此方法innerHTML在 SVG 元素上使用但不受支持。检查 d3.select.html 参考

我在 bl.ocks 上的解决方案

D3 模板插件

于 2013-11-06T01:10:19.827 回答
1

我没有专门与 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每个元素，传入dand i。因此，除非传入iich 模板会导致不良行为，否则我很确定您会获得相同的结果。

如果传递iinto ich 模板是一个问题，解决方法是

.html(function(d,i) { return ich.head(d); })
于 2013-02-25T18:59:36.123 回答
0

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

于 2013-10-18T19:13:11.337 回答