D3.js D3更新垂直堆叠条形图

我有一个垂直堆叠条形图，希望动态删除

rect

元素。为此，我遵循了基本的输入/更新/退出过程。然而，所发生的是，即使这些条的宽度为0，它们似乎也被添加了

var drawBars = function(data) {
  var margin = {top: 5, right: 20, bottom: 5, left: 170},
      width = 1020 - margin.left - margin.right,
      height = 1820 - margin.top - margin.bottom,
      scope = this;

  var x = d3.scale.linear()
      .rangeRound([0, width-150]);

  var y = d3.scale.ordinal()
      .rangeBands([0,height], .2, 3);

  var color = d3.scale.category20c();

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("top")
      .tickSize(0)
      .tickFormat(d3.format("s"));

  var yAxis = d3.svg.axis()
      .scale(y)
      .tickSize(0)
      .orient("left");

  var svg = d3.select('#barchart svg')
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var createData = function(filter) {
    var data = d3.nest()
      .key(function(d) { return d.org; })
      .key(function(d){ return d.taskforce_id })
      .rollup(function(v){ return v.length })
      .entries(scope.rawData['participants']);

      _.each(data, d => {
          _.extend(d, _.object(_.map(d.values, c => {
            if (typeof filter !== 'undefined') {
              if (c.key == filter) {
                return [c.key, c.values];
              }
              return [c.key, 0];
            }
            return [c.key, c.values];
          })));
          delete d.values;
      });

    data.forEach(function(d) {
      var y0 = 0;
      d.orgs = ["A", "B", "C"].map(function(org) {
        if (d[org] === undefined) {
          return {name: org, y0: 0, y1: 0};
        } else {
          return {name: org, y0: y0, y1: y0 += +d[org]};
        }

      });
      d.total = d3.max(d.orgs, d => { return d.y1; });
    });

    data.sort(function(x, y){
       return d3.descending(x.total, y.total);
    });
    return data;
  };

  var redrawChart = function(filter) {
    var data = createData(filter);
    console.log(data);

    x.domain([0, d3.max(data, function(d) { return d.total; })]);
    y.domain(data.map(function(d) { return d.key; }));
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "key"; }));

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + 15 + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

    /////////
      //ENTER//
      /////////
    var chartRow = svg.selectAll("g.chartRow")
      .data(data);

    var newRow = chartRow
      .enter()
      .append("g")
      .attr("class", "chartRow")
      .attr("transform", function(d) { return "translate(0, " + y(d.key) + ")"; });

    var rectRow = newRow.selectAll(".bar")
      .data(function(d) { return d.orgs; });

    rectRow
      .enter()
      .append("rect")
      .attr("class", function(d) { return "bar t_"+ d.name; } )
      .attr("height", y.rangeBand())
      .on('click', function(d){
        redrawChart(d.name);
      })
      .style("fill", function(d) { return color(d.name); });

    //////////
      //UPDATE//
      //////////
    chartRow.selectAll('rect').transition()
      .duration(300)
      .attr("width", function(d) { return x(d.y1) - x(d.y0); })
      .attr("x", function(d) { return x(d.y0); })
      .attr("opacity",1);

      ////////
      //EXIT//
      ////////
    chartRow.exit().selectAll("rect.bar").transition()
      .style("opacity","0")
      .attr("transform", "translate(0," + (height + margin.top + margin.bottom) + ")")
      .remove();
  };

  redrawChart();

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse());

  var legends = legend.enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });

  legend.exit().remove();

  legends.append("rect")
      .attr("x", width - 28)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legends.append("text")
      .attr("x", width - 34)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

  legends.append("text")
      .attr("x", width + 14)
      .attr("y", 9)
      .attr("class", "numbers")
      .attr("dy", ".35em")
      .style("text-anchor", "end");

};

当I

console.log

时，

数据

似乎一切正常，因此过滤工作正常。但是，

rect

元素的宽度似乎使用了旧的数据集。同样，图例和轴也被复制

在这里拉小提琴：

---

任何细节？

您的第二个数据绑定不应仅使用输入的节点，因为过滤后，此选择将为空：

 var rectRow = chartRow.selectAll(".bar").data(function(d) {
     return d.orgs;
 });

---

我们不知道数据是如何变化的，但是从代码中，rectRow选择从d.orgs获取数据。你应该对更新图表行选择做同样的事情你发布了很多代码，但是还有很多事情，从比例到函数调用，我们不得不猜测。你为什么不发一个MCVE？举个例子，一把小提琴/一支笔/一把琴键？很好的观点，只是添加了一把小提琴，即使宽度是0 d3。退出不会移除它。d3 exit仅在条形图的数据从阵列中移除时移除。关于axis，它会被复制，因为您在

重画图表中再次追加了axis

这里有一个带有一些修复的提琴@Cyril您的提琴没有显示任何差异吗？