圆环图 - 具有外半径的arcTween过渡
嗨,我的意图是在甜甜圈更新时,甜甜圈可以随着过渡而增长。
我使用这段代码来插入弧线(完美的工作),但是我为甜甜圈添加插值并且效果不好,甜甜圈正在增长,过渡从0开始并且转到新的半径。
弧:
//SET ARC RADIUS
chart_vars_object.arc = d3.svg.arc()
.outerRadius(chart_vars_object.general_radius)
.innerRadius(0);
路径:
//CREATE PATHS WITH ARC
chart_vars_object.path = g.append("path")
.attr("class","arc")
.style({'cursor': 'pointer', 'opacity': '0.9'})
.attr("fill", function(d) {
return chart_vars_object.color(d.data.hash_taggeds_name);
})
.attr("d", chart_vars_object.arc)
.each(function(d) {
this._current = d;
});
当我更新时:
chart_vars_object.arc_update = d3.select(".pie_id_"+ id_update).selectAll(".arc_group").select(".arc")
.data(function(d) {
return chart_vars_object.pie(data_update.hash_taggeds_update);
})
.transition()
.duration(750)
.attrTween("d", arc_update_Tween);
function arc_update_Tween(d) {
this._current = this._current || d;
var interpolate_arcs = d3.interpolate(this._current, d);
var interpolate_donut = d3.interpolate(chart_vars_object.arc.outerRadius()(), newradius);
this._current = interpolate_arcs(0);
return function(t) {
return chart_vars_object.arc.innerRadius(0).outerRadius(interpolate_donut(t))(interpolate_arcs(t));
};
}
任何建议?
抱歉我的英语.-