CODEWITHSUNDEEP
javascriptd3.jstransition
techhighlands
techhighlands

Reputation: 972

d3 transition not following path

I like to make the aircraft follow the path. But whatever I have tried there is a shift between the transition path and the actual drawn path on the screen. Please look at the 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 + ')'
        }
    }
}

Upvotes: 0

Views: 45

Answers (1)

Mark
Mark

Reputation: 108517

You are missing a space after the second -0.359863 in the matrix definition:

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

Upvotes: 2

Related Questions