d3-selection: version 1.3.1 crash with d3-transition: transition is not a function

Hi.

After updating to version 1.3.1 im getting error that select(...).transition is not a function I manage to narrow it down to be something in version 1.3.1. Nothing has changed im my code only this update. any ideas?

Here is the code. (webpack with react and d3-pack)

    const sortedData = this.sortData(this.props.data);
    const dataSet = { children: sortedData };
    const nodes = hierarchy(dataSet).sum(d => d[this.props.valueFieldName]);
    const size = 800;
    const bubbleSizeScale = scaleSqrt()
      .domain([
        this.props.minValue,
        this.props.maxValue,
      ])
      .range([this.props.minRaduis, this.props.maxRaduis]);

    const bubbles = pack()
      .size([size, size])
      .radius(d => bubbleSizeScale(d.value))
      .padding(this.props.bubblePadding);

    const svg = d3Select('.container-124')
      .attr('viewBox', `0 0 ${size} ${size}`)
      .attr('width', size)
      .attr('height', size)
      .attr('class', 'bubble');

    const self = this;
    const node = svg.selectAll('.node')
      // Render the data acourding to the node id and value
      .data(bubbles(nodes).descendants(), d => `${d.data.id}-${d.data[this.props.valueFieldName]}`);

    const bubbleContainer = node
      .enter()
      .filter(d => !d.children)
      .append('g')
      .style('cursor', 'pointer')
      .attr('class', 'node')
      .attr('id', d => `a${d.data.id}`)
      .attr('transform', d => `translate(${d.x},${d.y})`);


    bubbleContainer
      .append('circle')
      .enter();

    svg.selectAll('circle')
      .attr('r', 1);

    bubbleContainer
      .append('text')
      .attr('dy', '7px')
      .attr('class', 'bubble-text-title')
      .style('text-anchor', 'middle')
      .style('opacity', 0)
    node.exit().remove();

    svg.selectAll('.node')
      .transition() //<-- Here it crashes.
      .duration(500)
      .attr('transform', d => `translate(${d.x},${d.y})`);

    svg.selectAll('circle')
      .transition()
      .duration(200)
      .attr('r', d => d.r);

    // Wait for bubbles to render then show the text

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 28 (3 by maintainers)

Commits related to this issue

Specifically import d3-transition After code splitting (PR #701) the `transition` prototype was, depending on the dataset, not set on `Selection()` objects. See https://github.com/d3/d3-selection/iss... — committed to nextstrain/auspice by jameshadfield 5 years ago
Pin d3-selection to overcome https://github.com/d3/d3-selection/issues/185 — committed to ooni/api by hellais 5 years ago
➕ Add dagre-d3 Related https://github.com/d3/d3-selection/issues/185, need to change yarn.lock — committed to MadratJerry/Compilers-Playground by MadratJerry 5 years ago

Most upvoted comments

As @edmorley mentioned, this was an issue due to multiple versions of d3-selection in the yarn.lock.

I had to add the following to my package.json:

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

Removed the yarn.lock file and then ran yarn

+16

LeeKevin on May 1, 2019

Same here, and one solution could be as below:

...
import 'd3-transition' 
...

I think it happened because Selection.prototype.transition() was added in d3-transition package, so we must import transition package. See the source code.

+12

vanppo on Nov 1, 2018

We hit this issue too - I believe it occurs when multiple versions of d3-selection are listed in yarn.lock - which looking at the repo linked above was the case there too.

In our case, this is caused by the d3 parent package (for d3 v4.x) having pinned to exact versions (eg d3-selection@1.3.0), whereas the d3-* sub-packages tend to use version ranges (eg d3-selection@1, which is equivalent to ^1.0.0).

For your case, I’m guessing the exact pinned version is coming from your package.json and the stale version is due to not refreshing the lockfile?

+11

edmorley on Sep 7, 2018

Thanks for taking the time to post a full example! I am able to reproduce the issue at hand.

From D3 Custom Bundle II:

Note that you must also import selection from d3-selection; otherwise, Rollup doesn’t know that it needs to include the imported code from d3-transition.

I thought perhaps the same is true of Webpack and tried importing selection as well, like this:

import { selection, select as d3Select } from 'd3-selection';
import 'd3-transition';

Unfortunately this does not resolve the issue, and selection.transition is still not defined.

I can also confirm that selection.transition is also not defined after upgrading to d3-selection v1.3.2, and is defined (desired behavior) after reverting to d3-selection v1.3.0.

FWIW, here’s the diff between 1.3.0 and 1.3.1.

I wonder if this may be related to adoption of terser.

curran on Sep 3, 2018

fix this issue by register d3.selection.prototype manually

import selection_interrupt from '../../node_modules/d3-transition/src/selection/interrupt'
import selection_transition from '../../node_modules/d3-transition/src/selection/transition'
d3.selection.prototype.interrupt = selection_interrupt
d3.selection.prototype.transition = selection_transition

yuzhouu on Oct 8, 2019

I had the same issue. In my case, the solution was to simply use npm for package management, and it worked without pinning any version of the package. It seems to me it might be an issue with yarn itself (maybe a new update). Hopefully this solution is helpful to some extend.

Bijan-Ghasemi-Afshar on Feb 13, 2019

I had the issue multiple times, and it is true that it is caused by the presence of multiple versions of d3-selection (also d3-transition?). I manually edited yarn.lock to consolidate multiple versions of d3-selection into one and it solved the issue.

d3-selection@^1.1.0, d3-selection@^1.3.0, d3-selection@^1.4.1, d3-selection@^1.4.2:
  version "1.4.2"
  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c"
  integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==

What my yarn.lock entry for d3-selection looks like after my manual consolidation.

matthewma7 on Aug 20, 2020