Animation .ease（）-指针的动画应位于拱形轨迹中

我正在玩（）一个使用Tomer的d3js的定制仪表。在他的代码中，他调用

updateGauges（）gauges[key].redraw（30+50*Math.random（）-30*Math.random（））

为要设置动画的指针生成随机数。我把它改为

gauges[key].redraw（80）以便指针不会重新渲染

在初始加载期间，指针在到达其目的地时遵循最短路径，而不是在拱形轨迹中设置动画（与实际仪表的操作方式类似）。当80作为参数传入时，指针将从0开始逆时针设置动画。相反，它应该始终遵循拱形轨迹

你们认为应该修改/添加什么

*Soln更新：

this.drawPointer = function(value)
{
    var delta = this.config.range / 13;
    var n=value/2;

    var head = this.valueToPoint(n, 0.85);
    var head1 = this.valueToPoint(n - delta, 0.12);
    var head2 = this.valueToPoint(n + delta, 0.12);

    var headlast = this.valueToPoint(value, 0.85);
    var head1last = this.valueToPoint(value - delta, 0.12);
    var head2last = this.valueToPoint(value + delta, 0.12);

    var tailValue = n -  (this.config.range * (1/(270/360)) / 2);
    var tail = this.valueToPoint(tailValue, 0.28);
    var tail1 = this.valueToPoint(tailValue - delta, 0.12);
    var tail2 = this.valueToPoint(tailValue + delta, 0.12);

    var tailValuelast = value -  (this.config.range * (1/(270/360)) / 2);
    var taillast = this.valueToPoint(tailValuelast, 0.28);
    var tail1last = this.valueToPoint(tailValuelast - delta, 0.12);
    var tail2last = this.valueToPoint(tailValuelast + delta, 0.12);


    var data = [head, head1, tail2, tail, tail1, head2, head];

    var line = d3.svg.line()
                        .x(function(d) { return d.x })
                        .y(function(d) { return d.y })
                        .interpolate("basis");


    var pointerContainer = this.body.select(".pointerContainer");   

    var pointer = pointerContainer.selectAll("path").data([data])                                       

    pointer.enter()
            .append("svg:path")
                .attr("d", line)
                .style("fill", "#dc3912")
                .style("stroke", "#c63310")
                .style("fill-opacity", 0.7)

    pointer.transition()
                .attr("d", line) 
                .each("end", function () {      
                if (value!=0) {

                        var head = headlast;
                        var head1 = head1last;
                        var head2 = head2last;

                        var tailValue = tailValuelast;
                        var tail = taillast;
                        var tail1 = tail1last;
                        var tail2 = tail2last;

                        var data = [head, head1, tail2, tail, tail1, head2, head];

                        var line = d3.svg.line()
                                        .x(function(d) { return d.x })
                                        .y(function(d) { return d.y })
                                        .interpolate("basis");

                        var pointer = pointerContainer.selectAll("path").data([data])                                       

                        pointer.enter()
                            .append("svg:path")
                                .attr("d", line)
                                .style("fill", "#dc3912")
                                .style("stroke", "#c63310")
                                .style("fill-opacity", 0.7)

                        pointer.transition()
                                .attr("d", line) 
                                .ease("bounce")
                                .duration(600); 
                            }
                }
                )
                .duration(200);

    var fontSize = Math.round(this.config.size / 10);
    pointerContainer.selectAll("text")
                        .data([value])
                            .text(Math.round(value))
                        .enter()
                            .append("svg:text")
                                .attr("x", this.config.cx)
                                .attr("y", this.config.size - this.config.cy / 4 - fontSize)                        
                                .attr("dy", fontSize / 2)
                                .attr("text-anchor", "middle")
                                .text(Math.round(value))
                                .style("font-size", fontSize + "px")
                                .style("fill", "#000")
                                .style("stroke-width", "0px");
}

问候，

Viswesh
我也是D3新手，但以下是我的理解（如果我错了，请纠正我）：

在这里，只需将x和y值从当前值更改为目标值即可进行插值

在您的情况下，y值需要从当前值->最高点（100）->更改为目标值

我能想到的解决方案之一是添加控制点。
这与D有什么关系？@tjameson我不确定D是如何被标记的。移除它。尹，很好的建议。谢谢当80通过时，指针将首先移动到40（head、head1、head2、tail、tail1、tail2），然后在80结束转换（tailvaluelast、taillast、tail1last、tail2last）。指针设置为40动画后，将调用回调函数。虽然指针不能模拟两个端点之间的平滑过渡，但它看起来像一个特殊版本的仪表。值得注意的是指针的长度没有减少太多。
var line = d3.svg.line()
    .x(function(d) { return d.x })
    .y(function(d) { return d.y })
    .interpolate("basis");