如何在d3圖形中添加圖像到邊緣？

Question

考慮力向圖（http://bl.ocks.org/mbostock/950642）。

在這裏，我們添加鏈接：

var link = svg.selectAll(".link") 
     .data(json.links) 
     .enter().append("line") 
     .attr("class", "link"); 

的問題是：如何將一些圖像添加到邊（鏈接），並將其放置到線的中心？

這一個不工作：

link.append("image") 
      .attr("xlink:href", "some.png") 
      .attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; }) 
      .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; }) 
    .attr("width", 24) 
    .attr("height", 24); 

Answer 1

的問題是，你的image元素附加到一個line元素 - 它不會顯示這種方式。您需要將其附加到頂級svg元素或g元素。 Here就是這樣做的一個例子。