'd3 transition is not a function

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.

typescript d3.js

Solution 1:^[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.

Solution 2:^[2]

I encountered this when I was mix using import * as d3 from 'd3'; and individual import { select } from 'd3-selection'. I overcome the issue by just using individual import, which I guess is the suggested way of doing things.

Solution 3:^[3]

For posterity's sake on this old issue. I found another option for [email protected], which is to add this to your package.json:

"resolutions": {
    "d3-selection": "1.3.0"
}

Then deleting your yarn.lock and then yarn install the project again to help yarn handle the version resolutions.

FYI: My d3 dependencies in my package.json are (showing that I don't have d3-selection as a direct dependency):

    ...
    "d3": "4.13.0",
    "d3-geo-projection": "2.9.0",
    "d3-scale": "1.0.0",
    "d3-scale-chromatic": "3.0.0",
    ...

This seems to mainly be an issue with how yarn handle it's dependency resolution because, as a test, I was able to temporarily switch my project over to npm and had no issues.

This thread on Github lists a few alternative solutions to what I posted above (and worked for me): https://github.com/d3/d3-selection/issues/185

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mashehu
Solution 2	Morio
Solution 3

'd3 transition is not a function

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]