d3-js 的 Force-Directed Layout 是不是支持图像作为节点?
Posted
技术标签:
【中文标题】d3-js 的 Force-Directed Layout 是不是支持图像作为节点?【英文标题】:Does Force-Directed Layout of d3-js support image as node?d3-js 的 Force-Directed Layout 是否支持图像作为节点? 【发布时间】:2011-11-10 11:58:03 【问题描述】:d3 拥有a demo of a Force-Directed Graph Layout。
我希望图中的所有节点都是图像,而不是圆圈。
所以,我改变了
.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);
但我看不到任何图像。我做错了什么?
【问题讨论】:
【参考方案1】: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
【讨论】:
您是否知道如何将矩形图像制作为圆形节点内的圆形图像?您给定的示例将在其中显示一个圆圈和一个矩形图像。谢谢。 @derek,border-radius 怎么样:100%; CSS 样式? border-radius 不适用于 svg:image 但有希望:***.com/questions/7430580/…以上是关于d3-js 的 Force-Directed Layout 是不是支持图像作为节点?的主要内容,如果未能解决你的问题,请参考以下文章
求一首欧美流行歌曲歌词是:la la la la la la la la bye