javascript 使用新的 data.json 更新 d3 饼图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19717519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
update d3 pie chart with new data.json
提问by jotamon
I have a dynamic data source that creates a new json in the browser frequently.
我有一个动态数据源，它经常在浏览器中创建一个新的 json。
I was able to create a pie chart from this json using the code below (also at this fiddle)
我能够使用下面的代码从这个 json 创建一个饼图（也在这个 fiddle）
var data=[{"crimeType":"mip","totalCrimes":24},{"crimeType":"theft","totalCrimes":558},{"crimeType":"drugs","totalCrimes":81},{"crimeType":"arson","totalCrimes":3},{"crimeType":"assault","totalCrimes":80},{"crimeType":"burglary","totalCrimes":49},{"crimeType":"disorderlyConduct","totalCrimes":63},{"crimeType":"mischief","totalCrimes":189},{"crimeType":"dui","totalCrimes":107},{"crimeType":"resistingArrest","totalCrimes":11},{"crimeType":"sexCrimes","totalCrimes":24},{"crimeType":"other","totalCrimes":58}];
var width = 800,
height = 250,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.totalCrimes;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function (d) {
return color(d.data.crimeType);
});
g.append("text")
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function (d) {
return d.data.crimeType;
});
This data updates frequenty so what would be the best way to update the pie? Look at this fiddle. Here I have another json called data2.
这些数据经常更新，那么更新饼图的最佳方法是什么？看看这个小提琴。这里我有另一个名为 data2 的 json。
How could I simply replace data with data2 and have the pie animate/update?
我怎么能简单地用 data2 替换数据并让饼图动画/更新？
Note: on some updates values could == 0
注意：在某些更新值可能 == 0
回答by ninjaPixel
I have created a working version and have posted it here: http://www.ninjaPixel.io/StackOverflow/doughnutTransition.html(for some reason I couldn't get the transitions to play ball in fiddle, so have just posted it to my website instead).
我已经创建了一个工作版本并将其张贴在这里：http: //www.ninjaPixel.io/StackOverflow/doughnutTransition.html（由于某种原因，我无法获得在小提琴中演奏球的过渡，所以刚刚将其张贴到我的网站）。
To make the code clearer I have omitted your labelling, renamed 'data' to 'data1', and have stuck in some radio buttons to flip between the data arrays. The following snippet shows the important bits. You can get the whole code from my page above.
为了使代码更清晰，我省略了您的标签，将“数据”重命名为“数据1”，并使用一些单选按钮在数据数组之间切换。以下代码段显示了重要的部分。您可以从我上面的页面获取完整代码。
var svg = d3.select("#chartDiv").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "pieChart")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(data1))
.enter()
.append("path");
path.transition()
.duration(500)
.attr("fill", function(d, i) { return color(d.data.crimeType); })
.attr("d", arc)
.each(function(d) { this._current = d; }); // store the initial angles
function change(data){
path.data(pie(data));
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
You may find thiscode of Mike Bostock's helpful, it is where I learned how to do this.
您可能会发现Mike Bostock 的这段代码很有帮助，这是我学习如何执行此操作的地方。
回答by Scott Cameron
Here are some other similar questions that might help:
以下是一些可能有帮助的其他类似问题：
