Question

尝试向大师学习，我看到Bostock生成了这段代码：

<circle transform="translate(651,665)" class="g-person-target" r="22.5" style="stroke-width: 5px;"></circle>

创建the elements in this example。

但他从哪里得到实际人物的照片？我没有看到。

只是寻找动态添加图像（不是单个固定图像）到Force Layout节点的最佳方法，例如Facebook个人资料图片。

Answer 1

不确定它是“最佳”，但是this approach seems to work。

groups.append("image")
  .attr("xlink:href", "http://graph.facebook.com/hannahymiller/picture?type=small")
  .style
    'clip-path': 'url(#clip)'

仍然有兴趣知道是否有更优化的解决方案。

Answer 2

我认为这是他从

获取图像的地方

http://graphics8.nytimes.com/newsgraphics/2013/01/07/movie-network/72ae3b8d92ecc7a67c00babd2a75f34bfdacb3a7/mugs.jpg

这部分代码

    personDot.append("image")
          .attr("xlink:href", "http://graphics8.nytimes.com/newsgraphics/2013/01/07/movie-network/72ae3b8d92ecc7a67c00babd2a75f34bfdacb3a7/mugs.jpg")
          .attr("x", function(d, i) { return -mugDiameter / 2 - mugDiameter * (i % 9); })
          .attr("y", function(d, i) { return -mugDiameter / 2 - mugDiameter * (i / 9 | 0); })
          .attr("width", 9 * mugDiameter)
          .attr("height", 6 * mugDiameter)
          .attr("clip-path", "url(#g-mug-clip)")
          .style("pointer-events", "none");

用图像填充D3节点圆的最佳方法是什么？

2 个答案: