Javascript D3.js attrTween返回Null（意外行为）

我有一个非常基本的D3SVG，它基本上由几个弧组成

无论我使用什么（attr、attrTween和call），我似乎都无法通过回调的第一个参数获取数据——它总是返回null（我假定这是某种解析错误，即使路径正确呈现？）

我可能忽略了一些基本的东西，因为我对图书馆比较陌生

var el      = $('#graph'),
                        width   = 280,
                        height  = 280,
                        twoPi   = Math.PI * 2,
                        total   = 0;

                    var arc = d3.svg.arc()
                        .startAngle(0)
                        .innerRadius(110)
                        .outerRadius(130),

                        svg = d3.select('#graph').append("svg")
                            .attr("width", width)
                            .attr("height", height)
                        .append("g")
                            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),

                        meter = svg.append('g').attr('class', 'progress');

                    /* Add Meter Background */

                    meter.append('path')
                        .attr('class', 'background')
                        .attr('d', arc.endAngle(twoPi))
                        .attr('transform', 'rotate(180)');

                    /* Add in Icon */

                    meter.append('text')
                        .attr('text-anchor', 'middle')
                        .attr('class', 'fa fa-user')
                        .attr('y',30)
                        .text('')


                    /* Create Meter Progress */

                    var percentage  = 0.4,
                        foreground  = meter.append('path').attr('class', 'foreground')
                                        .attr('transform', 'rotate(180)')
                                        .attr('d', arc.endAngle(twoPi*percentage)),

                        setAngle    = function(transition, newAngle) {

                            transition.attrTween('d',     function(d,v,i) {
console.log(d,v,i)
                            });
                            /*transition.attrTween('d', function(d) { console.log(this)
                                var interpolate = d3.interpolate(d.endAngle, newAngle);
                                return function(t) { d.endAngle = interpolate(t); return arc(d); };
                            });*/

                        };


                    setTimeout(function() {
                        percentage = 0.8;
                        foreground.transition().call(setAngle, percentage*twoPi);
                    },2000);

这段代码似乎有问题：

transition.attrTween('d', function(d,v,i) {
    console.log(d,v,i)
});

返回：

undefined 0 "M7.959941299845452e-15,-130A130,130 0 0,1 76.4120827980215,105.17220926874317L64.65637775217205,88.99186938124421A110,110 0 0,0 6.735334946023075e-15,-110Z"

我尝试使用内插器将I值解析为字符串，因为我似乎无法获取“d”，但是在返回具有多个NaN的d属性时出现了解析错误

---

这一切看起来都很奇怪，因为这是一条从圆弧计算出来的简单路径？？？

D3（

d

这里）中基本上所有回调的第一个参数是绑定到您正在操作的DOM元素的数据元素。在您的情况下，没有数据绑定到任何东西，因此

d

是未定义的

我已经更新了您的JSFIDLE，使其更像饼图示例。要显示的百分比绑定到路径作为基准。然后，您所需要做的就是绑定新数据并以与任何饼图示例相同的方式创建二者：

meter.select("path.foreground").datum(percentage)
     .transition().delay(2000).duration(750)
     .attrTween('d', function(d) {
       var interpolate = d3.interpolate(this._current, d);
       this._current = interpolate(0);
       return function(t) {
         return arc.endAngle(twoPi*interpolate(t))();
       };
});

---

很抱歉有点愚蠢，但是尽管有文档和教程，我似乎无法掌握最好的方法来完成这项工作。。。我假设我应该使用诸如

scale=d3.scale.linear（）.domain（[0100]）.range（[0，twoPi]）

之类的东西，但是当涉及到实际绑定数据时，在一个简单的圆弧动画上下文中该如何做呢？如果我需要了解一些重要的背景知识，我不反对轻松阅读……那么，你到底想做什么？如果你想做一个饼图，请看。好吧，我会致力于解决这个问题（几乎正是我想要的，尽管我想静态定义端角，而不是基于进度回调）。。。出于某种原因，我根本看不到在那里显式使用的数据方法（仅设置path d属性），尽管我猜它在进程侦听器中的某个地方？我也意识到这可能很旧，但我认为tween方法在v3时就被弃用了？注意，添加了

.datum（{endAngle:twoPi*percentage}）

到前景弧解决了

d未定义

错误，但是仍然没有动画？