使用新数据更新 D3 饼图.json
update d3 pie chart with new data.json
>我有一个动态数据源,它经常在浏览器中创建新的json。
我能够使用以下代码从这个 json 创建一个饼图(也在这个小提琴上)
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;
});
这些数据经常更新,那么更新饼图的最佳方法是什么?看看这个小提琴。在这里,我有另一个名为 data2 的 json。
如何简单地用 data2 替换数据并让饼图动画/更新?
注意:在某些更新中,值可能 == 0
我创建了一个工作版本并将其发布在这里:http://www.ninjaPixel.io/StackOverflow/doughnutTransition.html(由于某种原因,我无法获得在小提琴中打球的过渡,所以只是将其发布到我的网站上)。
为了使代码更清晰,我省略了您的标签,将"data"重命名为"data1",并卡在一些单选按钮中以在数据数组之间翻转。以下代码片段显示了重要位。您可以从上面的页面获取整个代码。
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));
};
}
你可能会发现Mike Bostock的这段代码很有帮助,这是我学会如何做到这一点的地方。
以下是其他一些可能有帮助的类似问题:
- 如何使用 d3 更新饼图.js
- D3 饼图过渡与 attrtween
- 简单的 D3.js饼图转换*没有*数据连接?
- 向 D3 中的动画饼图添加新段.js
- https://groups.google.com/forum/#!msg/d3-js/2o5NTVjVJgA/AslmRSxXUAgJ
相关文章:
- 有条件更新d3.js力图中节点的最佳方法
- 更新d3.js雷达图
- 如何不断更新 d3 图中 x 轴的范围
- 如何更新 d3 图的数据
- 需要有关更新D3.js wordcloud的帮助
- 如果源 json 已更新(添加或删除项目),则动态更新 D3 旭日
- 使用不同的值和不同的数据大小更新 D3 柱形图
- 使用新数据更新 D3 饼图.json
- 更新 D3 条形图时调用 svg 元素的宽度的问题
- 更新 d3 中的条形图以生成多个图表
- 如何使用更新的数据集更新 d3.js饼图
- 更新d3.js组中的数据
- 通过Merge更新D3.js(NVD3.js)数据
- 如何根据用户输入更新D3 SVG图表
- 更新d3堆叠条形图/柱形图上的数据
- 如何更新d3中的绑定数据
- 使用D3或JQuery更新D3创建的屏幕
- 使用间隔更新d3数据
- 我可以基于到不同数据对象的数据联接来更新D3选择器中的DOM元素吗
- 更新D3数据并不能从仿3d示例中删除旧数据