D3：如何用新数据刷新图表？

Question

我创建了一个 d3 圆环图。这是我的代码：

var width = 480;
var height = 480;
var radius = Math.min(width, height) / 2;
var doughnutWidth = 30;

var color = d3.scale.category10();

var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);

var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d[1]; });

var dataset = settings.dataset;
console.log(dataset);

var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) { 
  return color(d.data[0]);
})

我的网页上有一个简单的表单，其中显示了一个带有多个选项的下拉菜单。每次用户更改表单上的值时，都会向我的脚本 (settings.dataset) 发送一个新数据集，并在页面上重新绘制甜甜圈。

问题是，前一个数据集中的一些值保留在 DOM 中。在下面的控制台输出中，您可以看到第二个数据集只有两个元素。第三个来自之前的数据集。这弄乱了图表，因为它显示了一个不应该存在的值。

我的问题：如何清除旧值？我已经阅读了.exit() 和.remove()，但我无法理解这些方法。

Answer 1

创建一个在创建和更新时（重新）绘制饼图的函数。

应使用enter() 将新数据添加到饼图中，应使用exit().remove() 删除旧数据

就这么简单：

  path.enter().append("path")
            .attr("fill", function(d, i) { return color(i); })
            .attr("d", arc)
            .each(function(d) {this._current = d;} );

  path.transition()
            .attrTween("d", arcTween);

  path.exit().remove()

完整的工作代码 -> JSFIDDLE

Answer 2

实现你想要的“重绘”效果有两个步骤：

首先，我假设您希望在第一次加载页面时只绘制一次 svg 画布，然后更新 svg 中的图表，而不是删除并重绘 svg：

 var svg = d3.select("body")
              .selectAll("svg")
              .data([settings.dataset]);  
 // put data in an array with only one element

 // this ensures there is only one consistent svg on the page when data is updated(when the script gets executed) 
 svg.enter().append("svg")  

第二，了解enter()，exit()，关于这个有很多很棒的教程。在你的情况下，我建议画这样的甜甜圈：

var path = svg.selectAll(".donut")  
           .data(settings.data)

// bind data to elements, now you have elements belong to one of those 
// three 'states', enter, exit, or update

// for `enter` selection, append elements
path.enter().append("path").attr("d", arc).attr("fill", "teal")

// for `update` selection, which means they are already binded with data
path.transition().attrTween("d", someFunction) // apply transition here if you want some animation for data change

// for `exit` selection, they shouldn't be on the svg canvas since there is no corresponding data, you can then remove them
 path.exit().remove()

Answer 3

//remove and create svg
d3.select("svg").remove(); 
var svg = d3.select("body").append("svg").attr("width","960").attr("height", "600"),
inner = svg.append("g");