d3过渡不遵循路径

Question

我喜欢让飞机沿着路径走。但是无论我尝试过，屏幕上的转换路径和实际绘制的路径之间都会有所变化。请看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 + ')' 
     } 
    } 
} 

Answer 1

你缺少的矩阵定义第二-0.359863后的空间：

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