javascript - 为什么此 D3.js 条形图上的数据未正确更新？

Question

我构建了一个 D3.js 条形图来比较几年的数据。 This is a demo .

根据 Mike Bostock 的 Let's Make a Bar Chart教程中，bars 的结构如下，一个 rect 和一个 text 元素(分别代表 bar 和它的标签)嵌套在一个 g.bar 元素中，所有的 g.bars 都保存在 g.chart 中。

<g class="chart" transform="translate(45,10)">
    <g class="bar" transform="translate(0,0)">
      <rect style="fill: rgb(117, 220, 205); stroke-width: 0.5; stroke: rgb(255, 255, 255);"  height="2.0673635307781666" width="56.9547619047619" y="116.5993031358885">
      <text class="total" y="111.5993031358885" x="28.47738095238095" text-anchor="middle" alignment-baseline="middle" style="stroke: none; fill: rgb(51, 51, 51); font-size: 0.5em; font-weight: bold; display: none;">60</text>
    </g>
    <g class="bar" transform="translate(0,0)">
        <rect style="fill: rgb(117, 220, 205); stroke-width: 0.5; stroke: rgb(255, 255, 255);"  height="2.0673635307781666" width="56.9547619047619" y="116.5993031358885">
        <text class="total" y="111.5993031358885" x="28.47738095238095" text-anchor="middle" alignment-baseline="middle" style="stroke: none; fill: rgb(51, 51, 51); font-size: 0.5em; font-weight: bold; display: none;">60</text>
    </g>
    ...
</g>

每个 g.bar 中只能嵌套一个矩形和一个文本元素。在测试我的图表时，我注意到有些退出似乎没有正确发生。您必须通过检查 demo 来重现它使用 Firebug 或 Chrome 开发工具，但在更改一年后或实际上在不更改年份的情况下加载图表时，每个 g.bar 包含多个矩形和文本元素。我没有正确实现 enter() exit() remove() 模式吗？我怎样才能解决这个问题？谢谢!

Answer 1

您只想从 .enter 选择中追加矩形和文本。因此，您必须捕获输入选择，然后在附加矩形和文本时使用它。像这样:

var barsEnter = bars.enter()
    .append("g")
    .classed("bar",true);

...然后应用它:

barsEnter.append("rect")
...
barsEnter.append("text")
...

这是一个PLUNK说明这一点。