Question

我目前正在将文本节点附加到SVG，如下所示：

var node = svg.selectAll(...);
node.append("text")
    .attr("dy", 10)
    .attr("dx", 4)
    .text(function (d) { return d["name"]; });

当前大约有10个节点，每个节点都有一个名称。

我想使用正确的宽度在每个文本节点下方添加一个矩形，我已经尝试过：

node.select<SVGTSpanElement>("text")
    .each(function(x, i) {
        console.log(this.getComputedTextLength());
        node.append("rect")
            .attr("fill", "#cccccc05")
            .attr("width", this.getComputedTextLength())
            .attr("height", 20)
    });

我的问题是（很明显）我在每个节点上创建10个矩形，每个节点都没有一个矩形。

如何包括文本宽度的计算，并为每个文本元素添加一个矩形？

Answer 1

无需过多重构代码，只需更改要附加矩形的 where 即可。在这种情况下，文本本身的父节点：

node.select<SVGTSpanElement>("text")
    .each(function(x, i) {
        console.log(this.getComputedTextLength());
        d3.select(this.parentNode).append("rect")
            .attr("fill", "#cccccc05")
            .attr("width", this.getComputedTextLength())
            .attr("height", 20)
    });

但是，最惯用的方式是使用each()进行node选择，而不是选择其中的文本。然后，您将获得每个node元素的文本长度，如下所示：

node.each(function(x, i) {
    d3.select(this).append("rect")
        .attr("fill", "#cccccc05")
        .attr("width", d3.select(this).select("text").node().getComputedTextLength())
        .attr("height", 20)
    });

在文本后面添加正确大小的矩形

1 个答案: