Javascript d3.js可以'；无法访问以前的数据属性

我有一个正确显示的饼图。我（成功地）改变了基础数据，然后尝试将饼图切片设置为新的大小。不使用任何类型的吐温或过渡，切片可以重新调整大小（尽管是即时的）。我曾尝试使用示例代码来添加平滑过渡，但在使它们正常工作时遇到了困难。我当前的updateData方法如下所示

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

我对如何编写tween方法感到困惑。我设置了如下的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最终是path DOM元素的更新d值
• “this”最终成为更新后的path-DOM元素

由于这些参数最终都与更新的数据相关，我如何在不知道更新前原始数据的开始/结束角度的情况下进行插值

代码

---

你看到了吗？谢谢@Larskothoff，我尝试过使用Mike的代码，但我得到了一个“未捕获的TypeError:无法使用'in'运算符搜索未定义中的'data'。如果我尝试调用console.log（this.\u current），则只记录“undefined”，因为“this”指的是DOM中的实际路径元素（我假设它没有._current属性。我的函数是从正确的位置调用的吗？这应该是什么._current？这是你必须遵循的一般方法。如果不看代码，我就无法进一步告诉你。我已经将我的代码添加到原来的post@larskothoff中了。有什么重大错误吗？）向你发脾气？我怀疑我的更新选择不正确。请见谅！你没有在

中保存数据。\u current

。

<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>

{
    "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}
            ]
}