Почему криво работает анимация d3.js v5 sankey?

Question

[Артур Карапетян]

Здравствуйте, тостеровчане.

У меня есть sankey диаграмма. Появилась задача плавно обрабатывать изменение данных диаграммы, после нескольких часов проб я совсем отчаялся.

В общем и целом проблема в том, что после того, как я пытаюсь добавить к d3 элементам подписей, узлов и ссылок плавную анимацию

Код отрисовки

nodes = sankeySvg
        .append('g')
        .attr('class', 'nodes')
        .selectAll('rect')
        .data(nodes)
        .join('rect')
        .attr('class', 'node')
        .attr('x', d => d.x0)
        .attr('y', d => d.y0)
        .attr('height', d => d.y1 - d.y0)
        .attr('width', d => d.x1 - d.x0)
        .attr('fill', d => colorPalette(d.name))
        .on('mouseover', onNodeMouseOver)
        .on('mouseout', onNodeMouseOut);

labels = sankeySvg
        .append('g')
        .attr('class', 'labels')
        .selectAll('text')
        .data(nodes)
        .join('text')
        .attr('class', 'label')
        .attr('x', d => (d.x0 < width / 2 ? d.x1 + 8 : d.x0 - 8))
        .attr('y', d => (d.y1 + d.y0) / 2)
        .attr('text-anchor', d => (d.x0 < width / 2 ? 'start' : 'end'))
        .attr('dy', '0.35em')
        .text(d => d.name);

links = this.sankeySvg
        .append('g')
        .attr('class', 'links')
        .attr('fill', 'transparent')
        .selectAll('path')
        .data(links)
        .join('path')
        .attr('class', 'link')
        .attr('d', d3.sankeyLinkHorizontal())
        .attr('stroke', d => colorPalette(d.source.name))
        .attr('stroke-width', d => d.width)
        .attr('opacity', 0.67)
        .on('mouseover', onLinkMouseOver)
        .on('mousemove', onMouseMove)
        .on('mouseout', onLinkMouseOut);

Код перерисовки

nodes
        .data(nodes)
        .attr('fill', d => colorPalette(d.name))
        .transtion() // Если убрать эти строки,
        .duration(200) // то все будет работать
        .attr('x', d => d.x0)
        .attr('y', d => d.y0)
        .attr('height', d => d.y1 - d.y0);

labels
        .data(nodes)
        .transtion() // Если убрать эти строки,
        .duration(200) // то все будет работать
        .attr('x', d => (d.x0 < width / 2 ? d.x1 + 8 : d.x0 - 8))
        .attr('y', d => (d.y1 + d.y0) / 2)
        .attr('text-anchor', d => (d.x0 < width / 2 ? 'start' : 'end'));

links
        .data(linksData)
        .attr('stroke', d => colorPalette(d.source.name))
        .transtion() // Если убрать эти строки,
        .duration(200) // то все будет работать
        .attr('d', d3.sankeyLinkHorizontal())
        .attr('stroke-width', d => d.width);

Все начинает идти наперекосяк, в итоге из такого
получается такое вместо такого