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

Question

我正试图根据此示例在该代码笔中添加标签和图标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作为组选择。

Answer 2

感谢Gerardo提供的这个非常有用的CodePen条目。显然，CSS覆盖了JS，必须进行修改才能显示图标，例如：

发件人：.node { fill: #000; }

收件人：.node { fill: none; stroke: <some color so the labels appear>;}

我对CodePen 更新的更新