圆环图 - arcTween过渡与外半径

时间:2014-04-08 20:14:47

标签: d3.js

圆环图 - 具有外半径的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));
                        };
                    }

任何建议?

抱歉我的英语.-

0 个答案:

没有答案