参考这个fiddle example http://jsfiddle.net/andycooper/a7as6/:
我需要用图像替换符号...或者可能首先用单个图像替换...例如,此图像:
https://github.com/favicon.ico
我在代码中尝试的内容如下:
vis.selectAll("path")
.data(nodes)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16)
.style("stroke", "black")
.style("stroke-width", "1px")
.call(force.drag);
正在追加中image
标记到每个path
标签,但不显示图像本身。有什么提示吗?
您将每个图像附加为每个路径的子级。您可能想要的是附加一个包含路径和图像的组(我认为这就是您在第一条评论中所要求的)。
像这样的东西:
var groups = vis.selectAll("g")
.data(nodes).enter()
.append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(force.drag);
groups.append("path")
.attr("d", d3.svg.symbol()
.size(function(d) { return d.size; })
.type(function(d) { return d.type; }))
.style("fill", "steelblue")
.style("stroke", "black")
.style("stroke-width", "1.5px");
groups.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16)
.style("stroke", "black")
.style("stroke-width", "1px");
See: http://jsfiddle.net/findango/a7as6/4/ http://jsfiddle.net/findango/a7as6/4/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)