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 + ')'