如何在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就是这样做的一个例子。