更新d3饼图与新的data.json [英] update d3 pie chart with new data.json

问题描述

我有一个动态数据源，在浏览器中经常创建一个新的json。

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)

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;
});

这个数据更新频繁，所以更新饼图的最好方法是什么？查看这个小提琴。这里我有另一个json称为data2。

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并进行饼图动画/更新？

How could I simply replace data with data2 and have the pie animate/update?

注意：对于某些更新值，可以== 0

Note: on some updates values could == 0

推荐答案

我创建了一个工作版本，并在此处发布： http://www.ninjaPixel.io/StackOverflow/doughnutTransition.html （因为某些原因，我无法得到转换，在小提琴中打球，所以刚刚发布到我的网站）。

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

更清楚我已经省略了你的标签，更名为数据为数据1，并停留在一些单选按钮，在数据数组之间翻转。以下代码段显示重要的位。您可以从我上面的页面获取整个代码。

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.

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的帮助，这是我学会了如何做到这一点。

You may find this code of Mike Bostock's helpful, it is where I learned how to do this.

这篇关于更新d3饼图与新的data.json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！