How to add image to edge in d3 graph?

Question

Consider force-directed graph (http://bl.ocks.org/mbostock/950642).

Here we add links:

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

The question is: how to add some image to the edge (to link), and place it into the center of the line?

This one doesn't work:

    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

The problem is that you're appending the image element to a line element -- it won't show this way. You need to append it either to the top-level svg element or a g element. Here is an example that does that.