d3过渡不遵循路径
问题描述:
我喜欢让飞机沿着路径走。但是无论我尝试过,屏幕上的转换路径和实际绘制的路径之间都会有所变化。请看jsfiddled3过渡不遵循路径
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 + ')'