从d3动画饼中删除片段

Question

我有我正在使用的原型代码：

jsfiddle

该示例显示了在添加新数据时如何添加细分，而不是在数据更改[返回]时如何再次删除细分。我是d3的新手，还没有得到exit（）函数......

如果您反转初始和第二个数据集，您将看到葡萄段从未被移除。提前谢谢！

任何帮助都会很棒！

更新代码:(我的最终图表需要在数据更改时更新计时器）

var arcs = arc_grp.selectAll("path")
  .data(donut(data));
   arcs.enter()
  .append("path")
  .attr("stroke", "white")
 .attr("stroke-width", 0.8)
 .attr("fill", function(d, i) { return color(i); })
 .attr("d", arc)
 .each(function(d) { return this.current = d; });

 var sliceLabel = label_group.selectAll("text")
.data(donut(data));
 sliceLabel.enter()
 .append("text")
 .attr("class", "arcLabel")
 .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + 
  ")"; })
 .attr("text-anchor", "middle")
 .style("fill-opacity", function(d) {
  if (d.value === 0) { return 1e-6; }
  else { return 1; }
  })
  .text(function(d) { return d.data.label; });
  };

Answer 1

要删除没有数据的元素，您必须使用exit()，其中......

  

返回退出选择：选择中没有找到新数据的现有DOM元素。

因此，在updateChart函数中，您需要为路径和文本选择退出：

var newArcs = arcs.data(donut(dataset));

newArcs.exit().remove();

var newSlices = sliceLabel.data(donut(dataset));

newSlices.exit().remove();

这是您更新的代码：

＆＃13;

＆＃13;

// Setup all the constants
var duration = 500;
var width = 500
var height = 300
var radius = Math.floor(Math.min(width / 2, height / 2) * 0.9);
var colors = ["#d62728", "#ff9900", "#004963", "#3497D3"];

// Test Data
var d2 = [{
  label: 'apples',
  value: 20
}, {
  label: 'oranges',
  value: 50
}, {
  label: 'pears',
  value: 100
}];

var d1 = [{
  label: 'apples',
  value: 100
}, {
  label: 'oranges',
  value: 20
}, {
  label: 'pears',
  value: 20
}, {
  label: 'grapes',
  value: 20
}];

// Set the initial data
var data = d1

var updateChart = function(dataset) {
  var newArcs = arcs.data(donut(dataset));

  newArcs.exit().remove();

  newArcs.enter()
    .append("path")
    .attr("stroke", "white")
    .attr("stroke-width", 0.8)
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc);
    
  newArcs.transition()
    .duration(duration)
    .attrTween("d", arcTween);
    
  var newSlices = sliceLabel.data(donut(dataset));
  
  newSlices.exit().remove();

  newSlices.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + (arc.centroid(d)) + ")";
    })
    .style("fill-opacity", function(d) {
      if (d.value === 0) {
        return 1e-6;
      } else {
        return 1;
      }
    });

  sliceLabel.data(donut(dataset)).enter()
    .append("text")
    .attr("class", "arcLabel")
    .attr("transform", function(d) {
      return "translate(" + (arc.centroid(d)) + ")";
    })
    .attr("text-anchor", "middle")
    .style("fill-opacity", function(d) {
      if (d.value === 0) {
        return 1e-6;
      } else {
        return 1;
      }
    })
    .text(function(d) {
      return d.data.label;
    });
};

var color = d3.scale.category20();
var donut = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.value;
  });
var arc = d3.svg.arc()
  .innerRadius(radius * .4)
  .outerRadius(radius);
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var arc_grp = svg.append("g")
  .attr("class", "arcGrp")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
var label_group = svg.append("g")
  .attr("class", "lblGroup")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

var arcs = arc_grp.selectAll("path")
  .data(donut(data));
arcs.enter()
  .append("path")
  .attr("stroke", "white")
  .attr("stroke-width", 0.8)
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc)
  .each(function(d) {
    return this.current = d;
  });

var sliceLabel = label_group.selectAll("text")
  .data(donut(data));
sliceLabel.enter()
  .append("text")
  .attr("class", "arcLabel")
  .attr("transform", function(d) {
    return "translate(" + (arc.centroid(d)) + ")";
  })
  .attr("text-anchor", "middle")
  .style("fill-opacity", function(d) {
    if (d.value === 0) {
      return 1e-6;
    } else {
      return 1;
    }
  })
  .text(function(d) {
    return d.data.label;
  });


// Update the data
setInterval(function(model) {
  return updateChart(d2);
}, 2000);

// Tween Function
var arcTween = function(a) {
  var i = d3.interpolate(this.current, a);
  this.current = i(0);
  return function(t) {
    return arc(i(t));
  };
};

＆＃13;

.arcLabel {
  font: 10px sans-serif;
  fill: #fff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

＆＃13;

＆＃13;