使用图像作为节点的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>并使用它填充圆圈。

下面是与代码修改（我增加圈半径，这样可以更好地看到图像）：https://jsfiddle.net/ppk23hnz/

顺便说一句，没有这些变化与D3版：它们在v3.x和v4.x中是一样的。 PS：不要混合使用jQuery和D3。你不需要那个（这很令人不安）。