D3.js 在D3中设置过渡动画和删除元素时出现问题

我的目标是允许最终用户使用单击时运行的更新函数在两个直方图之间切换

我可以使用以下两个函数成功地更新直方图，每个数据集一个函数。然而，我只能想办法 1以非常突然的方式删除现有的RECT，并用更新数据的新RECT替换它们，或 2在两个数据集之间平滑设置过渡动画，但无法删除第一组矩形

可以在此处看到D3可视化：

当您单击“不透水百分比”时，直方图将正确更新，但会突然而不美观地更新。 当你点击百分比树冠时，柱状图会随着一个很好的过渡而更新，但是之前的一组矩形会保留下来

单击“不透水百分比”时运行的代码如下所示：

function drawChartImperv(data) {

  //grab the values you need and bin them
  histogramData = d3.layout.histogram()
    .bins(xScale.ticks(10))
    (data.features.map(function (d) {
        return d.properties.Imperv_P}));

  window.histogramData = histogramData;

  yScale.domain([0, d3.max(histogramData, function(d) { return d.y; })])
    .nice();
  yAxis.scale(yScale);
  yAxis2.call(yAxis);

  xAxis2.select(".xLabel")
    .text("Impervious Percentage")

  bar.remove();

  //bind the data once
  bar = svg.selectAll(".bar")
      .data(histogramData)

  //handle new elements
  bar.enter()
      .append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });

  bar.append("rect")
      .attr("x", 0)
      .attr("y", function (d) { (height - padding) - yScale(d.y);})
      .attr("width", xScale(histogramData[0].dx)/2)
      .attr("height", function (d) { return (height - padding) - yScale(d.y); })
      //color the bars using the color function for the layer
      .style("fill", "#309195")

    // handle updated elements
  bar.transition()
    .duration(3000)
    .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });

    // handle removed elements
  bar.exit()
    .remove();
}

允许平滑转换但不删除旧矩形的代码为：

function drawChartCan(data){

  //grab the values you need and bin them
  histogramData = d3.layout.histogram()
    .bins(xScale.ticks(10))
    (data.features.map(function (d) {
        return d.properties.Can_P}));

  window.histogramData = histogramData;

  yScale.domain([0, d3.max(histogramData, function(d) { return d.y; })])
    .nice();
  yAxis.scale(yScale);
  yAxis2.call(yAxis);


  xAxis2.select(".xLabel")
    .text("Canopy Percentage")

  //bind the data once
  bar = svg.selectAll(".bar")
      .data(histogramData)

  //handle new elements
  bar.enter()
      .append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });

  bar.append("rect")
      .attr("x", 0)
      .attr("y", function (d) { (height - padding) - yScale(d.y);})
      .attr("width", xScale(histogramData[0].dx)/2)
      .attr("height", function (d) { return (height - padding) - yScale(d.y); })
      //color the bars using the color function for the layer
      .style("fill", "#41ab5d")

    // handle updated elements
  bar.transition()
    .duration(3000)
    .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; })

    // handle removed elements
  bar.exit()
    .remove();
}

这两个代码块之间的唯一区别在于，在DrawChartImprov函数中，在Y轴和X轴更新后有一个bar.remove语句

我怀疑bar.remove语句在DrawChartImprov函数中的位置不正确，但我无法确定它应该在哪里，以便在两组条之间进行良好的转换，并删除旧的rect

完整代码如下：

---

所有建议和提示将不胜感激。

是否保证两个条形图的条形数相同？看看这些资源是否有用：而且不能保证两个条形图的条形数相同，不幸的是-这是代码的简化，只显示了两个数据属性-我想在项目中使用总共10个，所以需要考虑所有的场景！感谢您提供的资源，我将看一看