D3 v4力图，图像为节点

Question

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

将img用作v4节点的正确方法是什么？

以下是我正在尝试的内容，以及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中没有d3.append。你可能意味着svg.append。
2. 将<pattern>的宽度和高度设置为1。
3. 将ID设置为<pattern>并使用该ID填充圈子。

以下是更改的代码（我增加了圈子＆＃39;半径，因此您可以更好地查看图片）：https://jsfiddle.net/ppk23hnz/

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

PS：不要混合使用jQuery和D3。你不需要（而且非常令人不安）。