javascript d3-js 的 Force-Directed Layout 是否支持图像作为节点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7306250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does Force-Directed Layout of d3-js support image as node?
提问by Tinyfool
d3has a demo of a Force-Directed Graph Layout.
d3有一个 Force-Directed Graph Layout 的演示。
Instead of circles, I want all nodes in the graph to be images.
我希望图中的所有节点都是图像，而不是圆圈。
so, I changed
所以，我改变了
.append("svg:circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 5)
.style("fill", function(d) { return fill(d.group); })
.call(force.drag);
to
到
.append("xhtml:img")
.attr("src", "http://a577.phobos.apple.com/us/r1000/081/Purple/12/61/13/mzi.lgqdzwfu.png")
.call(force.drag);
But I can not see any images. What am I doing wrong?
但我看不到任何图像。我究竟做错了什么？
回答by
node.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
Here is an example of using an image as the node: http://bl.ocks.org/950642
以下是使用图像作为节点的示例：http: //bl.ocks.org/950642
