d3js 4 获取路径转换的坐标

【问题标题】：d3js 4 get coordinate of path transitiond3js 4 获取路径转换的坐标
【发布时间】：2018-02-11 14:36:03
【问题描述】：

我想知道动画路径过渡是否可以返回最后绘制的位置？ ..通过 attrTween 我们可以得到补间范围 [0-1] 但曲线 pos ??

例如：

 path
    .attr("stroke-dasharray", t1 + " " + t1)
    .attr("stroke-dashoffset", t1)
    .transition(d3.transition()
                            .duration(lap)
                            .ease(d3.easeLinear)
                            .attrTween( "e", function(d) {
                                    return function( t ) {}})
   .attr("stroke-dashoffset",0)

谢谢

【问题讨论】：

标签： javascript animation d3.js svg

【解决方案1】：

补间及其工厂可以这样定义：

function tween (t) {
    var totalLength = this.getTotalLength();
    //a SVGPoint object with x/y properties
    var position = this.getPointAtLength(total * t);
    //...do something
}

function tweenFactory (d) {
    return tween.bind(this);
}

如果在工厂执行时路径已经存在于DOM中并且路径长度没有改变，那么totalLength的计算显然可以移到工厂函数中。`

【讨论】：

谢谢！我已将 attrTween 切换为 tween 然后放回返回函数（ t ）并且它可以工作。