javascript - 在文本后面添加一个正确大小的矩形

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

无需过多重构代码，只需更改 添加矩形的位置即可。在这种情况下，文本本身的父节点:

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)
    });