使用d3.js更新甜甜圈图 [英] Updating Donut Graph Using d3.js
问题描述
我已经工作了几个小时，我无法使用d3.js绘制甜甜圈图来更新到新数据.
I've been working for a few hours now and I can't get my donut graph drawn with d3.js to update to new data.
我的HTML是
<body>
<div id="pie"></div>
<script src="pie.js"></script>
</body>
我的JS是
var dataset = [40, 20];
var width = 460,
height = 300,
radius = Math.min(width, height) / 2;
var color = ['#000000', '#FFFFFF'];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
function render() {
var pie = d3.pie()
.sort(null);
var arc = d3.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
var path = svg.selectAll("path")
.data(pie(dataset))
.enter().append("path")
.attr("fill", function(d, i) { return color[i]; })
.attr("d", arc);
}
render();
function update() {
dataset[0] = 100;
render();
}
当前这将绘制甜甜圈图，但是每当我从控制台调用update()函数时，数据集都会更新，但甜甜圈图不会在屏幕上更新.
Currently this draws the donut graph but whenever I call the update() function from the console, the dataset updates but the donut graph doesn't update on screen.
我找到了其他一些条形图示例(使用Enter，Append和Exit)，但是我无法使它们与我的示例配合使用.
I've found some other examples for bar charts (using enter, append and exit) but I can't get them to work with my example.
任何帮助将不胜感激，谢谢！
Any help would be appreciated, thanks!
推荐答案
如您所知，您仅在更新数据，而不会更改图表.您还知道，要更改图表，您必须设置更新"选择.
As you know, you are only updating the data, which will not change the chart. You also know that, for changing the chart, you'll have to set an "update" selection.
现在，您只有一个输入"选项:
Right now, you just have an "enter" selection:
var path = svg.selectAll("path")
.data(pie(data)).enter().append("path")
.attr("fill", function(d, i) { return color[i]; })
.attr("d", arc);
因此，每次更改dataset时，图表中都不会发生任何变化，因为输入"选择为空.您可以选择不存在的内容:
So, every time you change the dataset, nothing happens in your chart because your "enter" selection is empty. You could just select something that doesn't exist:
var path = svg.selectAll(".foo")
但这是一个糟糕的解决方案，因为您的SVG中会堆积很多路径.
But this is a terrible solution, because you'll have a bunch of paths piling up in your SVG.
因此，最好的解决方案是创建输入"和更新"选择:
So, the best solution is creating an "enter" and an "update" selection:
//this binds the data:
var path = svg.selectAll("path")
.data(pie(data));
//this is the "enter" selection:
var pathEnter = path.enter().append("path")
.attr("fill", function(d, i) { return color[i]; })
.attr("d", arc);
//this is the "update" selection:
var pathUpdate = path.attr("d", arc);
查看此演示:
var dataset = [40, 20];
var width = 300,
height = 200,
radius = 150;
var color = ['#222', '#EEE'];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
function render(data) {
var pie = d3.pie()
.sort(null);
var arc = d3.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
var path = svg.selectAll("path")
.data(pie(data));
var pathEnter = path.enter().append("path")
.attr("fill", function(d, i) {
return color[i];
})
.attr("d", arc);
var pathUpdate = path.attr("d", arc);
}
render(dataset);
setInterval(function() {
update();
}, 2000);
function update() {
dataset = [Math.random() * 50, Math.random() * 50];
render(dataset);
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="pie"></div>
这篇关于使用d3.js更新甜甜圈图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
