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

Question

我有一个包含 5 个条形的 D3 条形图。当我更新它时，我可以看到它过渡到正确的 3 个栏，但一些原始栏仍然可见 - 如何让它们退出？

这就是它最初的样子:

这就是它最终的样子:

深蓝色条是正确的。当前用于更新“rect”对象的代码如下:

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();