javascript - d3过渡未遵循路径

我喜欢让飞机沿着这条路走。但是，无论我尝试过什么，在屏幕上的过渡路径和实际绘制的路径之间都会发生转换。请查看jsfiddle

d3.selectAll('.aircraft').transition()
.duration(7500)
.attrTween('transform', translateAlong(d3.select('#samplePath').node()))

function translateAlong(path) {
    let l = path.getTotalLength()
        // debugger
        return function (i) {
        return function (t) {
            let p = path.getPointAtLength(t * l)
                console.log(p.x, p.y)
                return 'matrix(-0.359863 -0.230143 0.230143 -0.359863' + p.x + ' ' + p.y + ')'
        }
    }
}

最佳答案

您在矩阵定义中第二个-0.359863后缺少空格：

return 'matrix(-0.359863 -0.230143 0.230143 -0.359863 ' +  p.x + ' ' + p.y + ')'

关于javascript - d3过渡未遵循路径，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46445361/