Как добавить изображение к краю в графе 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 - пример, который делает это.