gpt4 book ai didi

javascript - 在 d3 树状图中围绕图像绘制一个带有自定义文本的矩形

转载 作者:行者123 更新时间:2023-11-30 14:40:32 25 4
gpt4 key购买 nike

我正在尝试绘制一个矩形形状,我可以在其中将一些数据放入 d3 树状图中。但我不确定我该怎么做。我在这里有初始的 plunkr:http://plnkr.co/edit/AoqY1xoRlwyK3VAxYuhz?p=preview这是我知道我可以为附加文本做的事情:

  nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);

基本上我想在每个节点周围绘制一个这样的形状: enter image description here

任何人都可以在这里帮助我或指出一些我可以引用的文档。

最佳答案

此处已有组元素。话虽这么说,您所需要的只是附加您的矩形(不要介意这里的魔数(Magic Number),您可以稍后更改它们):

var nodeRect = nodeEnter.append("rect")
.attr("height", 14)
.style("fill", "dodgerblue")
.attr("rx", 4)
.attr("ry", 4)
.attr("y", -7);

然后,在创建/附加文本选择后,计算文本的长度。我在这里使用 this.nextSibling.nextSibling 因为我知道文本相对于矩形的位置:

nodeRect.attr("width", function(d) {
return this.nextSibling.nextSibling.getComputedTextLength() + 30
})
.attr("x", function(d, i) {
return d._children || d.depth === 0 ? -(this.nextSibling.nextSibling.getComputedTextLength() + 14) : -14
});

这是您更新的 Plunker:http://plnkr.co/edit/a32rYZT6cSZ0c5zQrC6W?p=preview

关于javascript - 在 d3 树状图中围绕图像绘制一个带有自定义文本的矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49750136/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com