Javascript 以图像为节点的D3 v4力图

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

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

这是我正在尝试的，还有一个

正如您在CSS中看到的，我试图从每个节点的精灵表中获取图像

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);

到目前为止的问题是：

d3中没有

d3。在d3中追加
。您可能是指
svg.append

将

的宽度和高度设置为1

将ID设置为

，并使用该ID填充圆圈

以下是更改后的代码（我正在增加圆的半径，以便更好地查看图像）：

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

---

注意：不要混合使用jQuery和D3。你不需要这个（这很令人不安）。

为什么要将图案的宽度和高度更改为1？为什么它需要一个ID来填充圆圈？我听说不要将两者混用，但还没有遇到任何问题：）