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);
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.