D3 v4画像をノードとして持つ力グラフ

Question

画像を強制的なグラフのノードとして使用することに問題があります。私が今まで見てきたことはすべてv3コードと思われ、xlink：hrefまたはsvg：imageを使用するのか、またはその両方を使用するのかにかかわらず、今までのところ画像を取得できませんでした。

imgをv4のノードとして使用する正しい方法は何ですか？

ここで私が試しているのは、jsfiddleです。

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

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を混在させないでください。あなたはそれを必要としません（そして、それはかなり邪魔です）。