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],
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>
您需要将.transition方法添加到您的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));
};
}
我刚刚提到这个网站
这是一个分叉的小提琴
目前还不清楚如何设置图表的动画。
相关文章:
- D3.js模式不适用于弧形或圆环图
- D3从嵌套的JSON中绘制第二个圆环图
- 在同一个圆环图中使用不同的数据
- 如何在d3.js饼图或圆环图中添加阴影
- 如何更改圆环图中文本的颜色
- 修改d3.js圆环图以读取json数组
- 如何在chart.js中显示圆环图上的标签
- D3.js-带有多个圆环和动画过渡的圆环图
- 直接从代码笔复制的圆环图代码不起作用
- Highcharts没有内部饼图的圆环图
- c3.js圆环图onclick函数
- 如何使用d3js为循环中的圆环图添加工具提示
- 是否可以在ChartJS的圆环图中为分段添加更多属性
- 带标签的 D3 圆环图
- D3 圆环图 - 删除 0% 标签
- 将文本添加到 D3 圆环图的中心
- 圆环图未使用新值进行更新
- 如何在高图表中创建这样的饼图/圆环图
- 高图表:仅使用圆环图对饼图进行动画处理/防止内部大小动画
- 圆环图在 Angularjs 中不起作用