javascript - D3 选择不更新现有的分类文本元素

Question

我正在使用 d3 v6 创建一个组，bucket它包含包含不同 SVG 元素的子组。创建后，我想更新每组 class 中 svg 文本元素的数据textbox，但我无法选择和更新元素。在下面的代码中，我尝试只更新 class 的文本元素large，但没有任何反应。我没有正确使用类选择器吗？

这就是我创建组的方式：

const bucket = svg.append('g')
        .attr('class', 'bucket')

const textboxes = bucket.selectAll('g')
        .data(data)
        .join('g')
            .attr('class', 'textbox')
            .attr('transform', d => `translate(0, ${d.index * spacing})`)

const rects = textboxes.append('rect')
         .attr("width", 5)
         .attr("height", 50);

const textlarge = textboxes.append('text')
        .attr('class', 'large')
        .text(d => d.text);

const textsmall = textboxes.append('text')
        .attr('class', 'small')
        .text(d => d.text2);

上面的代码导致以下 DOM 结构：

<svg>
    <g class="bucket" transform="translate(50, 0)">
        <g class="textbox">
            <rect></rect>
            <text class="large">A</text>
            <text class="small">2</text>
        </g>
        <g class="textbox">
            <rect></rect>
            <text class="large">B</text>
            <text class="small">1</text>
        </g>
    </g>
</svg>

这就是我当前尝试更新框中数据的方式（在此摘录中，我仅尝试更新 class 的文本large）：

let bucket = container.select('g.bucket')
    .selectAll('g.textbox')
    .data(newdata)
    .join('g')
    .attr('class', 'textbox')
    .attr('transform', d => `translate(0, ${d.index * spacing})`)

const textlarge = bucket.append('text')
    .attr('class', 'large')
    .text(d => d.text));

标签： javascriptsvgd3.jscss-selectors