d3 transition is not a function

Question

I am having a problem with my D3 code.

const hexagon = this.hexagonSVG.append('path')
  .attr('id', 'active')
  .attr('d', lineGenerator(<any>hexagonData))
  .attr('stroke', 'url(#gradient)')
  .attr('stroke-width', 3.5)
  .attr('fill', 'none')

const totalLength = (<any>hexagon).node().getTotalLength()

const _transition = this.d3.transition()
  .duration(DASH_ANIMATION)
  .ease(this.d3.easeLinear)

hexagon
  .attr('stroke-dasharray', totalLength + ' ' + totalLength)
  .attr('stroke-dashoffset', totalLength)
  .attr('stroke-dashoffset', 0)
  .transition(_transition)

This code was working perfectly fine for almost 6 months, but an error just came out of nowhere today.

"hexagon.attr(...).attr(...).attr(...).transition is not a function"

Can someone please tell me how I solve this issue? Thank you.

Answer 1

For future reference: I ran into a similar issue and it seems to be a problem between webpack, yarn and d3-transition. The later extends the function of d3-selection, which somehow results in multiple d3-selection versions in the yarn.lock file (as described in this issue).

In my case explicitly adding d3-selection, removing the lock file and then running yarn install again fixed the issue.

It seems like every update of d3-transition recreates this problem.