Comments (7)
So yeah -- I got this working now...
Had to in my webpack force it to resolve "d3" to d3/index.js
instead of the d3/build/d3.js
, and ensure babel was parsing the node_modules/d3
directories
However this is a very annoying problem that I'm sure will catch a lot of users... Perhaps you should build a safer
export for event. Even something as silly as import {d3event} from 'd3'; d3event.event
might be a safe alias for UMD users that wont have binding/destructuring problems like I just did...
from d3-brush.
I’ve added some text to the README that will hopefully help avoid this issue:
If you use Babel, Webpack, or another ES6-to-ES5 bundler, be aware that the value of d3.event changes during an event! An import of d3.event must be a live binding, so you may need to configure the bundler to import from D3’s ES6 modules rather than from the generated UMD bundle; not all bundlers observe jsnext:main. Also beware of conflicts with the window.event global.
https://github.com/d3/d3-selection/blob/master/README.md#event
from d3-brush.
This is appears to be an issue with the use of destructuring assignment rather than import:
const {brush, event, select} = d3;
The problem here is that d3.event is not a constant: it changes whenever there’s an event.
If you save the value of d3.event on load, you should expect it to always be undefined. However, it’s not here because some browsers emulate IE’s global window.event, overriding your const event
, and hence you are seeing the native input events rather than the brush events.
If you change your code to refer to d3.event
instead of event
(and remove the const event
) it works fine. If you use vanilla JavaScript, it also works fine:
http://bl.ocks.org/mbostock/15a9eecf0b29db92f12ca823cfbbce0a
You should also be able to import {event} from "d3"
if you use ES6 modules. But that gets tricky because you need to make sure that "d3" in that case refers to D3’s ES6 modules, and not the UMD bundle, so that the import is properly resolved.
from d3-brush.
Okay, tested with d3.event
in my fiddle...
I am doing import {event} from "d3";
but still having this problem in my production code.
from d3-brush.
Right. The import {event} from "d3"
is probably an issue with Babel not respecting that imports are live bindings, not values. But I’m not sure whether that problem is caused by Babel trying to import from the D3 UMD bundle or whether it’s observing the jsnext:main field in the package.json like Rollup does and pulling directly from the ES modules.
from d3-brush.
Does webpack not observe jsnext:main? Is there some other magic I can put in the package.json to tell it to find index.js instead of build/d3.js?
from d3-brush.
Appears not: webpack/webpack#1979.
from d3-brush.
Related Issues (20)
- Brush event started does not initiate "points" variable HOT 1
- D3-Brush not working with Angular 17
- Can't create new brush selection inside extent, only change exsisting one HOT 1
- a brush transition is not interrupted HOT 1
- multitouch HOT 2
- FF android HOT 2
- Allow mousemove event triggering or switching brush state HOT 2
- brush.move should accept an event HOT 1
- Using brush for fine-grained zooming HOT 3
- Brush Wrapping
- bbnk,
- Error multitouch emit undefined inside move function HOT 8
- Brushing uses wrong mouse coordinates if perspective transformations are applied HOT 3
- Is it possible to update d3-color ? HOT 2
- Conflict trying to .filter() with a false value if there is also a d3-zoom active
- incorrect position of the selected area in firefox HOT 2
- Allow to change default to CENTER mode HOT 2
- Errors when using `filter` on mobile HOT 2
- Customize the brush style HOT 2
- Brush handles disappear at zero width HOT 4
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-brush.