javascript - 以图像为节点的 D3 v4 力图

Question

在力导向图中使用图像作为节点时遇到问题。到目前为止我看到的所有内容似乎都是 v3 代码，而且到目前为止我根本无法获取任何图像，无论是使用 xlink:href 还是 svg:image 或两者都使用。

在 v4 中使用 img 作为节点的正确方法是什么？

这就是我正在尝试的，以及 jsfiddle .

正如您在 CSS 中看到的，我正在尝试从每个节点的 spritesheet 中获取图像。

var defs = d3.append("svg:defs");

defs.append("svg:pattern")
      .attr("width", 48)
      .attr("height", 48)
      //.attr("patternUnits", "userSpaceOnUse")
      .append("svg:image")
      .attr("xlink:href", "http://placekitten.com/g/48/48")
      .attr("width", 48)
      .attr("height", 48)
      .attr("x", 0)
      .attr("y", 0);


var nodesDrawn = svg
.selectAll("node")
.data(nodesData)
.enter()
.append("g")
//.append("xhtml:i")
.append('circle')
.attr('r', 10);

Answer 1

目前存在的问题:

1. 没有d3.append在D3。您可能是说 svg.append .
2. 设置 <pattern> 的宽度和高度至 1。
3. 将 ID 设置为 <pattern>并用它来填充圆圈。

以下是经过更改的代码(我增加了圆圈的半径，以便您可以更好地看到图像):https://jsfiddle.net/ppk23hnz/

顺便说一下，这些更改都与 D3 版本无关:它们在 v3.x 和 v4.x 中是相同的。

PS:不要混合使用 jQuery 和 D3。你不需要这个(而且这很令人不安)。