如何在 D3 中使用 selection.join 更新标签？

Question

我有一个水平条形图，当单击其中一个单选按钮时它会更新。条形图更新得很好，但是，每次标签更新时，旧标签似乎都没有被删除。我在这里错过了什么吗？ exit 函数似乎不起作用。我找不到处理标签的示例。


    svg_bar.selectAll(".text-bar")
    .data(dataSet)
    .join(
    enter => enter
        .append("text")
        .attr('text-anchor', 'middle')
        .attr('font-size', '16px')
        .attr('font-family', 'sans-serif')
        .attr('fill', 'white')
      .call(enter => enter.transition()
        .duration(1000)
        .attr('y', (d) => yScale_h(d.clean_test) + yScale_h.bandwidth() / 2)
        .attr('x', (d) => xScale_h(d.Award) - 14)
        .text(function (d) {
          return `${d.Award} `;
        })
       ),
    update => update 
      .call(update => update.transition()
        .duration(1000)
        .text(function (d) {
          return `${d.Award} `;
        })
        .attr('y', (d) => yScale_h(d.clean_test) + yScale_h.bandwidth() / 2)
        .attr('x', (d) => xScale_h(d.Award) - 14)
       ),
    exit => exit
      .call(exit => exit.transition()
        .duration(1000)
        .remove()
       )
    );

Answer 1

如果你使用svg_bar.selectAll(".text-bar")，selection总是空的，d3总是添加新元素。

如果您使用svg_bar.selectAll("text")，selection 将包含svg 的所有文本元素，并且它会更改其他文本元素，例如y-axis 和标题。

仅 select 条形文本的一种方法是 select 加上 class，例如 svg_bar.selectAll("text.bar")。为此，需要使用 .classed('bar', true) 将附加的条分配给 'bar' class，以便它们 select 在下一个渲染中编辑。

svg_bar.selectAll("text.bar") // Selects the texts of class "bar"
    .data(dataSet)
    .join(
    enter => enter
        .append("text")
        .classed("bar", true) // Create texts with class "bar"
        .attr('text-anchor', 'middle')

...

如何在 D3 中使用 selection.join 更新标签？

How to update labels using selection.join in D3?

javascript

d3.js