Error when trying to transition axis

[Bob Monteverde]

When I try to call the axis on a transition, I get an infinitely repeating error:

329d3-transition.v0.2.js:308 Uncaught TypeError: interpolate is not a function
(anonymous function) @ d3-transition.v0.2.js:308
tween @ d3-transition.v0.2.js:347
start @ d3-transition.v0.2.js:120
schedule @ d3-transition.v0.2.js:69
r @ d3-timer.v0.4.min.js:1
u @ d3-timer.v0.4.min.js:1

The minimal example code:

var scale = d3_scale.scaleLinear().range([0, 400])
var axis = d3_axis.axisBottom().scale(scale)

d3_selection.select('#update').on('click', update)

update()

function update() {
  var t = d3_transition.transition().duration(2000)

  scale.domain([0, Math.random() * 100])

  d3_selection.select('#example')
     .transition(t)
    .call(axis)
}

Here's an example showing the issue (press update to cause the error) https://jsfiddle.net/obsrwzdc/

[Tom Wanzek]

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.

[Mike Bostock]

@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.

[Mike Bostock]

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

[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 ...