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

【问题标题】：What is the best way to fill D3 node circles with images?用图像填充 D3 节点圆圈的最佳方法是什么？
【发布时间】：2014-08-29 18:22:43
【问题描述】：

尝试向大师学习我看到 Bostock 生成此代码：

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

创建the elements in this example。

但是他从哪里得到真实人物的照片呢？我没看到。

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

【问题讨论】：

标签： d3.js force-layout

【解决方案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)'

仍有兴趣了解是否有更优化的解决方案。

【讨论】：

【解决方案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");

【讨论】：