Comments (4)
When the modules
d3-selection
andd3-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 ...
from d3-axis.
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
.
from d3-axis.
@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.
from d3-axis.
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
from d3-axis.
Related Issues (20)
- Support external rendering HOT 3
- How to apply pan/zoom to rotated X Axis labels? HOT 1
- Default formatter shows month name instead of Sunday HOT 2
- Date boundary issue for months with 31 days HOT 1
- Suggestion: Add axisTop example HOT 1
- `axis.tickValues` could also return `values`? HOT 3
- Render in vanilla HTML? HOT 2
- Right-align tick text in axisRight() ? HOT 1
- 如何入参是空,那么链式调用将被破坏
- Show scale extrema values in ticks HOT 1
- More configuration options?
- Uncaught TypeError: setting getter-only property "top" when calling axis function HOT 5
- not able to add custom attributes to the axis HOT 1
- Ticks with varying size
- Ticks misalignment HOT 2
- An option to disable the domain line HOT 1
- An option to generate grid lines HOT 3
- Ability to use `d3.timeXXX` on a scaleBand HOT 8
- Ability to set axis ticks count when using axis `tickFormat` function HOT 6
- d3-axis does not update SVG attributes when switching between axis orientations HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-axis.