Question

我试图按照此示例codepen

在此Labeled Force Layout中添加标签和图标

在我的restart方法中，我添加了代码

node.append("image")
   .attr("xlink:href", "https://github.com/favicon.ico")
   .attr("x", -8).attr("y", -8).attr("width", 16).attr("height", 16)
   .on("mousedown", mousedownNode);

   node.append("text").attr("dx", 12).attr("dy", ".35em").text(function(d) { return d.id });

在我现有的代码之后：

node.enter().insert("circle", ".cursor")
 .attr("class", "node").attr("r", 10).on("mousedown", mousedownNode);

我了解到我先将节点设为圆形，然后尝试向其添加图标，这是这里的问题，但我不确定如何修复。

Answer 1

您不能将<text>元素附加到<circle>元素上。

这里惯用的解决方案是将node转换为组选择，就像Mike Bostock在您共享的示例中一样：

node.enter().insert("g", ".cursor")
    .attr("class", "node");

然后，将圆圈和文字附加到node：

node.append("circle")
    .attr("r", 10)
    .on("mousedown", mousedownNode);

node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) {
        return d.id
    });

最后，更改tick函数：

node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"
});

这是更新的CodePen：https://codepen.io/anon/pen/VBepoo?editors=0010

当然，这只是一个快速的重构：您必须更改代码的其他部分，才能将node作为组选择。

标记并向D3 SVG节点添加图标

1 个答案: