Error when trying to transition axis about d3-axis

[milahu]

When the modules d3-selection and d3-transition are separately loaded (as opposed to using a pre-bundled d3 package), the mix-in might not work as intended

thanks!

i had this error (svelte repl) with the unnecessary

import { scaleLinear } from 'd3-scale';
import { extent } from 'd3-array';
import { select } from 'd3-selection';
import { zoom, zoomIdentity } from 'd3-zoom';
import { axisTop, axisRight } from 'd3-axis';

import * as d3Transition from 'd3-transition';

const d3 = Object.freeze({
  scaleLinear, extent, zoom, zoomIdentity, select, axisTop, axisRight, ...d3Transition,
});

and its solved with the simple

import * as d3 from 'd3';

tree-shaking is done anyway ...

[tomwanzek]

My first quick guess would be, that it has to do with the way the d3-transition module extends the d3-selection module. The d3-transition module extends the prototype of the selection to mix-in the transition and interrupt methods, so they can be called on selections generated by .select(...) or .selectAll(...).

When the modules d3-selection and d3-transition are separately loaded (as opposed to using a pre-bundled d3 package), the mix-in might not work as intended, because the relevant extension code in d3-transition extension of selection prototype is not executed on the object loaded from d3-selection.

[mbostock]

@tomwanzek Parts of your description are accurate, but there’s not the problem here; there is no issue loading d3-selection and d3-transition separately as long as you load d3-transition after its dependencies (including d3-selection). I’m investigating.

[mbostock]

The problem is that the README linked to an old version of d3-interpolate (0.5) which doesn’t export d3.interpolateTransformSvg, so the interpolator was undefined. This is fixed by updating to the correct version of d3-interpolate (0.8), which does:

<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
<script src="https://d3js.org/d3-collection.v0.2.min.js"></script>
<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-format.v0.5.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.8.min.js"></script>
<script src="https://d3js.org/d3-time.v0.2.min.js"></script>
<script src="https://d3js.org/d3-time-format.v0.3.min.js"></script>
<script src="https://d3js.org/d3-scale.v0.7.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.2.min.js"></script>
<script src="https://d3js.org/d3-axis.v0.3.min.js"></script>

(Also note that d3-collection was out-of-date.)

Alternatively, and more simply, you can load the default build of D3 4.0:

<script src="https://d3js.org/d3.v4.0.0-alpha.44.min.js"></script>

Here’s a working example:

http://bl.ocks.org/mbostock/1d96d9fdecf1b214f1395f94e0ba8758