D3.js - 具有多个环和动画过渡的圆环图 [英] D3.js - Donut charts with multiple rings and animation transition

问题描述

如何将过渡动画效果添加到具有多个环的以下D3图表中？

如下所示 D3.js - 具有多个响铃的圆环图

  var dataset = {apples：[53245,28479,19697,24037,40245]，oranges：[53,28,19,24]，柠檬：[53245,28479,19697,24037,40245]，梨： [53245,28479,19697,24037,40245]，菠萝：[53245,28479,19697,24037,40245]，}; var width = 460，height = 300，cwidth = 25; var color = d3.scale.category20（）; var pie = d3.layout.pie（）.sort（null）; var arc = d3.svg.arc（）; var svg = d3.select（＃chart）。append（svg）.attr（width，width）.attr（height，height）.append（g）.attr ，translate（+ width / 2 +，+ height / 2 +））; var gs = svg.selectAll（g）。data（d3.values（dataset））。enter（）。append（g）; var path = gs.selectAll（path）.data（function（d）{return pie（d）;}）.enter（）。append（path）.attr（fill ）{return color（i）;}）.attr（d，function（d，i，j）{return arc.innerRadius（10 + cwidth * j）.outerRadius（cwidth *（j + 1））（d ）;}）;  

 < script src =https ：//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js>< / script>< div id =chartwidth =600height =400 < / div>  

解决方案>

您需要向您的vis添加.transition方法

  var path = gs.selectAll（path） 
 .data（function（d）{return pie（d）;}）
 .enter（）。append（path）
 //添加行// 
。 transition（）。duration（750）.attrTween（d，arcTween）
 .attr（fill，function（d，i）{return color（i）;}）
 .attr d，函数（d，i，j）{return arc.innerRadius（10 + cwidth * j）.outerRadius（cwidth *（j + 1））（d）; }）; 
 
 //添加补间函数
 function arcTween（a）{
 var i = d3.interpolate（this._current，a）; 
 this._current = i（0）; 
 return function（t）{
 return arc（i（t））; 
}; 
} 
  

我只是引用了此网站

这里是 forked fiddle

不清楚如何对图表进行动画处理。

How can you add a transition animation effect to the following D3 chart with multiple rings?

As shown here D3.js - Donut charts with multiple rings

var dataset = {
                apples: [53245, 28479, 19697, 24037, 40245],
                oranges: [53, 28, 19, 24],
                lemons: [53245, 28479, 19697, 24037, 40245],
                pears: [53245, 28479, 19697, 24037, 40245],
                pineapples: [53245, 28479, 19697, 24037, 40245],
            };

            var width = 460,
                height = 300,
                cwidth = 25;

            var color = d3.scale.category20();

            var pie = d3.layout.pie()
                .sort(null);

            var arc = d3.svg.arc();

            var svg = d3.select("#chart").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
            var path = gs.selectAll("path")
                .data(function (d) { return pie(d); })
                .enter().append("path")
                .attr("fill", function (d, i) { return color(i); })
                .attr("d", function (d, i, j) { return arc.innerRadius(10 + cwidth * j).outerRadius(cwidth * (j + 1))(d); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="chart" width="600" height="400"></div>

解决方案

You need to add the .transition method to your vis

var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
//added line//
    .transition().duration(750).attrTween("d", arcTween)
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

//added tween function
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

I just referenced this site

Here is a forked fiddle

It's not clear as to how you want to animate the charts.

这篇关于D3.js - 具有多个环和动画过渡的圆环图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！