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

문제는 당신이 line 요소에 image 요소를 추가하고 있다는 것입니다 - 그것은 이런 식으로 표시되지 않습니다. 최상위 레벨 svg 요소 또는 g 요소에 추가해야합니다. Here이 그 예입니다.