Question

我正在尝试在d3.js中创建一个带有矩形的文本。我将它们放在一个svg组中。必须首先创建矩形在底部，但我必须在将数据绑定到文本框后再次设置矩形的宽度，我不知道该怎么做。

使用数据["hello","world"]，html应该看起来像这样（不包括一堆属性）：

<svg>
    <g>
        <rect></rect>
        <text>Hello</text>
    </g>

    <g>
        <rect></rect>
        <text>World</text>
    </g>
</svg>

我可以用d3.js完成这个：

var groups = svg.selectAll("g")
    .data(["hello","world"]).enter()
    .append("g");

var rects = groups.append("rect")
    .attr("height",15)
    .attr("width",10); // placeholder

var text = groups.append("text")
    .text(function(d) {return d;});

在此块之后，我尝试设置矩形宽度，如下所示：

rects.attr("width", function (d, i) {return text[i].getComputedTextLength();});

或者像这样：

rects.attr("width", function (d, i) {return text[i][0].getComputedTextLength();});

两者都抛出错误（第一个说对象数组没有函数getComputedTextLength，第二个说“无法读取属性'0'未定义”）。如何从其他选择中访问一个选择的属性？

结合d3.js中不同元素的数据

0 个答案: