Question

我有一张正确显示的饼图。我改变了基础数据（成功），然后尝试将饼图切片设置为新的大小。不使用任何类型的补间或转换，切片重新调整大小（尽管立即）。我试图使用示例代码来添加平滑过渡，但我无法使它们工作。我当前的updateData方法如下所示。

var changeData = function() {
                arcs.data(pie(data[1].semdata), key)
                .select("path")
                .transition()
                .duration(1000)
                .attrTween("d", arcTween);

我对如何编写补间方法感到困惑。我按如下方式设置arcTween方法以帮助我诊断问题。

function arcTween(var1, var2, var3) {
    console.log(var1);
    console.log(var2);
    console.log(var3);
    console.log(this);

var1最终成为更新的d3饼图对象（startAngle，endAngle，value）
var2最终成为索引
var3最终是路径DOM元素的更新d值
“this”最终成为更新后的路径DOM元素

由于这些参数最终都与更新的数据相关，如何在没有办法知道原始数据在更新之前的开始/结束角度是什么的情况下进行插值？

代码

<script type="text/javascript">
        var margin = {top:20, right:20, bottom:20, left:20};
        var w = 600 - margin.left - margin.right;
        var h = 600 - margin.top - margin.bottom;

        var outerRadius = w / 2;
        var innerRadius = 0;

        var arc = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

        var color = d3.scale.category10();

        var pie = d3.layout.pie()
                        .value(function(d) {
                        return d.freq;
                        })
                        .sort(null);

        var chart = d3.select(".chart")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.json("../data/2012_semesters_json.js", function(data) {

            var arcs = chart.selectAll("g.arc")
                .data(pie(data[0].semdata), key)
                .enter()
                .append("g")
                .attr("class", "arc")
                .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

            console.log(arcs);

            arcs.append("path")
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", arc);

            arcs.append("text")
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d) {
                    return d.data.term;
            });

            chart.selectAll("g.arc")
                .on("click", function(d) {
                    changeData();   
                    });

            var changeData = function() {
                arcs.data(pie(data[1].semdata), key)
                .select("path")
                .transition()
                .duration(1000)
                .attrTween("d", arcTween);

                arcs.select("text")
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d) {
                    return d.data.term;
            });
                }

        });

        var key = function(d) {
            return d.data.term;
        }

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


    </script>

这是json对象的样子片段。

{
    "id": 1,
    "course": "ACCT207",
    "semdata": [
            {"term": "2008 Fall", "freq": 35},
            {"term": "2009 Spring", "freq": 20},
            {"term": "2009 Fall", "freq": 225},
            {"term": "2010 Spring", "freq": 16},
            {"term": "2010 Fall", "freq": 6},
            {"term": "2011 Spring", "freq": 1},
            {"term": "2011 Fall", "freq": 30},
            {"term": "2012 Spring", "freq": 0}
            ]
}

d3.js无法访问attrTween之前的数据

0 个答案: