Блог

У меня есть гистограмма D3, в которой 5 столбцов. Когда я обновляю его, я вижу, что он переходит на правильные 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);
  

У вас есть только 3 новых столбца, поэтому количество элементов в ваших данных изменилось. Вам нужно использовать шаблон обновления.

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