D3: selection.transition() is not a function when using general d3 namespace

[k-i-m]

After upgrading to d3 v 4.12, all transitions called on selections report an error "transition() is not a function".
This applies when importing entire d3 into a namespace (import * as d3 from 'd3');

[mbostock]

Duplicate of d3/d3#3256. Possible fixes: 1. Upgrade to 5.0. 2. Use the D3 modules directly rather than the d3 default bundle. 3. Use your package manager, e.g., yarn’s resolutions feature, to pin the versions of the D3 modules so they are consistent with the d3 package you are using.

[AKlaus]

@mbostock, I have the exact same error but under different conditions:

• Version v5.0.0 of the bundle, so d3-selection: 1.3.0, d3-transition: 1.1.1;
• I import just certain modules (not import * as d3 from 'd3';):

import { axisBottom, axisLeft } from 'd3-axis';
import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale';
import { BaseType, select, Selection } from 'd3-selection';
import { transition } from 'd3-transition';

• I'm using strong types in TypeScript and have no compilation error

Checked that package-lock.json doesn't have references to older versions of the packages., so it's unlikely d3/d3#3256 bug. Also tried installing modules directly, but with no joy.
Upgrading to v5.0.2 is not an option as it hasn't been released as yet.

Of course, after import * as d3 from 'd3'; and selecting via d3.select() make it works.
What package am I missing?

[subramaniyanan176]

I am also facing same error as reported above. I tried this
import * as d3selection from 'd3-selection';
import 'd3-transition';
it works.

[nitinanand27]

Hi- i'm having same issue with selection.transition( ) any help would be appreciated

Error Message on Mouseover:- __ERROR TypeError: tooltip_1.transition is not a function
at SVGCircleElement.eval (line-chart.component.ts:278)
at SVGCircleElement.eval (on.js:27)
at ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:397)
at Zone.runTask (zone.js:165)
at SVGCircleElement.ZoneTask.invoke (zone.js:460)_

version:- d3: 4.9.1
types/d3: 4.8.0
d3-transition: 1.1.1
d3-selection: 1.2.0

Code from my component.ts

import { config } from 'app/config';
import * as d3 from 'd3';
import * as d3Selection from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Axis from 'd3-axis';
import * as d3Shape from 'd3-shape';
import * as d3Array from 'd3-array';
import * as d3Format from 'd3-format';
import * as moment from 'moment';

@ViewChild('chart') private chartContainer: ElementRef;

  private tooltip: any;

this.tooltip = d3.select(element).append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0);

  const tooltip = d3.select(this.chartContainer.nativeElement).selectAll('.tooltip');
            .....................
                   .on('mouseover', function (d) {
          tooltip.transition( ) //error here
            .duration(400)
            .style('opacity', 1);
          tooltip.html(
            site.headline + ' ' + (d.y > 1 ? d.y.toFixed(0) : d.y.toFixed(3))
          )
            .style('left', (d.posX - 40) + 'px')
            .style('top', (d.posY + 40) + 'px');
        })
        .on('mouseout', function (d) {
          tooltip.transition()
            .duration(500)
            .style('opacity', 0);
        });
    });

[duhaime]

I also ended up here and needed to:

import { select } from 'd3-selection';
import transition from 'd3-transition';

select('rect').transition() // ...