使用圖像作爲節點的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。你不需要那個（這很令人不安）。