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

完整的工作代码 - ＆gt; 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");