D3：如何使用新数据刷新图表？ [英] D3: How to refresh a chart with new data?

问题描述

我创建了一个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（），但我不能得到我的头
 
 
 
解决方案
创建一个函数，在创建饼图时及更新时重新绘制饼图。 > 
 
 
应使用 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   
 
I have created a d3 donut chart. Here is my code:
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]);
})
I have a simple form on my web page which displays a dropdown menu with several options. Every time a user changes a value on the form a new dataset is sent to my script (settings.dataset) and the donut is redrawn on the page.

Problem is, some of the values from the previous dataset remain in the DOM. In the console output below, you can see that the second dataset only has two elements. The third one is from the previous dataset. This is messing up the chart, as it is displaying a value that shouldn't be there.



My question: how do I clear the old values? I've read up on .exit() and .remove(), but I can't get my head around these methods.
解决方案
Create one function that (re)draws the pie when it's created and when it's updated.

New data should be added to pie using enter() and old data should be removed using exit().remove()

It is as simple as this:
  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()
Full working code -> JSFIDDLE

                        
这篇关于D3：如何使用新数据刷新图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！