d3-js 的 Force-Directed Layout 是否支持图像作为节点? [英] Does Force-Directed Layout of d3-js support image as node?
本文介绍了d3-js 的 Force-Directed Layout 是否支持图像作为节点?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
d3 有 一个力导向图布局的演示.
我希望图中的所有节点都是图像,而不是圆圈.
Instead of circles, I want all nodes in the graph to be images.
所以,我变了
.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);
到
.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?
推荐答案
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");
以下是使用图像作为节点的示例:http://bl.ocks.org/950642
Here is an example of using an image as the node: http://bl.ocks.org/950642
这篇关于d3-js 的 Force-Directed Layout 是否支持图像作为节点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文