使用新的data.json更新d3饼图

一尘不染

使用新的data.json更新d3饼图

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

阅读 282

2020-07-27

共1个答案

一尘不染

我已经创建了一个有效的版本，并将其发布在这里：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的这段代码很有帮助，这是我学习如何做到的地方。

2020-07-27