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

使用新的data.json更新d3饼图,第1张

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

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



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5615422.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-15
下一篇 2022-12-15

发表评论

登录后才能评论

评论列表(0条)

保存