Question

以下是我正在运行的代码http://jsfiddle.net/a7as6/14/

我知道我可以使用此代码将节点更改为图像：

node.append("svg:image")
    .attr("class", "circle")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", "-8px")
    .attr("y", "-8px")
    .attr("width", "16px")
    .attr("height", "16px");

但是当我使用它时，我的节点仍然不是图像。知道为什么吗？

我想知道如何用不同的图像更改每个节点？

THX。

Answer 1

您有正确的想法来附加图片，但您需要在node.enter（）上操作，如下所示：

   node.enter().append("image")
       .attr("class", function (d) {
           return "node " + d.id;
           })
       .attr("xlink:href", "https://github.com/favicon.ico")
       .attr("width", "16px")
       .attr("height", "16px");

然后您需要使用刻度函数来放置图像，如：

function tick() {
   node.attr("x", function (d) {
       return d.x;
   })
       .attr("y", function (d) {
       return d.y;
   })

这是工作fiddle。并不是说您需要移动图像以使它们看起来正确，您可以使用dx和dy属性来碰撞它们。

d3.js用图像替换节点

1 个答案: