d3.js 为D3 SVG节点添加标签和图标

thtygnil 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(477)

我尝试在此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);

我知道我是使节点作为圆第一次，然后试图添加一个图标，这是这里的问题，但我不知道如何解决它。

d3.js

来源：https://stackoverflow.com/questions/51347846/labeling-and-adding-an-icon-to-d3-svg-nodes

2条答案

按热度按时间

q1qsirdb1#

您无法将<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作为组选择。

赞(0）回复(0）举报 2022-11-12

clj7thdc2#

感谢Gerardo提供的这个非常有用的CodePen条目。显然，CSS覆盖了JS，必须进行修改才能显示图标，例如：
出发地：.node { fill: #000; }
收件人：.node { fill: none; stroke: <some color so the labels appear>;}
My update of your update on CodePen

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 为D3 SVG节点添加标签和图标

2条答案

相关问题

热门标签

最新问答