在对饼图进行排序时，如何应用动画过渡？我的意思不是更新值，而是将饼图的每个弧排序为 move into place the way bars do here .
有很多过渡examples for updating using new values现有数据集(或切换数据集)。我找不到任何有关如何重新排序(使用相同的值、相同的数据集)的信息。
我现在使用这个，它只是通过应用初始化渲染时使用的相同补间来重新绘制圆弧，但它从零开始每个圆弧。
.attr('d', arc)
.transition()
.duration(1000)
.attrTween("d", tweenPie);
function tweenPie(b) {
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc(i(t)); };
};
我是否需要以某种方式存储现有的开始和结束 Angular 并从中运行补间？
我明白了something kind of like that here ，尽管此示例是更新值，而不是排序。
谢谢。
最佳答案
以 Bostock 示例为基础 here .
setInterval(change, 2000);
var sort = false;
function change() {
sort = !sort;
if (sort){
pie = d3.layout.pie() //<-- pie with default sort
.value(function(d) {
return d.value;
});
} else {
pie = d3.layout.pie() //<-- pie with no sort
.value(function(d) {
return d.value;
})
.sort(null);
}
path = path.data(pie); // compute the new angles
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
完整代码:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 400px;
}
text {
font: 10px sans-serif;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body>
<script>
var width = 400,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.value(function(d) {
return d.value;
})
.sort(null);
var defaultSort = pie.sort;
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 20);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [{
value: 1
}, {
value: 5
}, {
value: 2
}, {
value: 6
}
];
var path = svg.datum(data).selectAll("path")
.data(pie)
.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.each(function(d) {
this._current = d;
}); // store the initial angles
setInterval(change, 2000);
var sort = false;
function change() {
sort = !sort;
if (sort){
pie = d3.layout.pie()
.value(function(d) {
return d.value;
});
} else {
pie = d3.layout.pie()
.value(function(d) {
return d.value;
})
.sort(null);
}
path = path.data(pie); // compute the new angles
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));
};
}
</script>
</body>关于javascript - d3饼图排序转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33042446/