为什么转换后旧条仍然可见

Question

我有一个D3条形图，有5个条形图。当我更新它时，我可以看到它转换到正确的3个条形图，但是一些原始条形图是可见的 - 我如何让它们退出？

这是它最初的样子：

这就是它最终看起来像：

深蓝色条纹是正确的。用于更新＆＃34; rect＆＃34;的当前代码对象如下：

var plot = d3.select("#barChartPlot")
  .datum(currentDatasetBarChart);

/* Note that here we only have to select the elements - no more appending! */

plot.selectAll("rect")
  .data(currentDatasetBarChart)
  .transition()
  .duration(750)
  .attr("x", function (d, i) {
    return xScale(i);
  })
  .attr("width", width / currentDatasetBarChart.length - barPadding)
  .attr("y", function (d) {
    return yScale(+d.measure);
  })
  .attr("height", function (d) {
    return height - yScale(+d.measure);
  })
  .attr("fill", colorChosen);

Answer 1

您只有3个新栏，因此数据中的元素数已更改。 您需要使用update pattern。

var rects = plot.selectAll("rect")
  .data(currentDatasetBarChart);

  rects.enter()
   .append("rect")
    //Code to style and define new rectangles.

  //Update 
  rects.update()
  .transition()
  .duration(750)
  .attr("x", function (d, i) {
    return xScale(i);
  })
  .attr("width", width / currentDatasetBarChart.length - barPadding)
  .attr("y", function (d) {
    return yScale(+d.measure);
  })
  .attr("height", function (d) {
    return height - yScale(+d.measure);
  })
  .attr("fill", colorChosen);

  // Remove unused rects
  rects.exit().remove();