Comments (5)
Please post an example that reproduces this issue. Otherwise I may not be
able to investigate.
On Wed, Jul 6, 2016 at 6:44 PM Valter Martinek [email protected]
wrote:
I probably came upon some kind of edge case. When zooming in and out I'm
gettingUncaught TypeError: Cannot read property '0' of undefined
I have traced this back to wheeled function in zoom.js. Specifically on line
218
Line 218 in cff5362
g.zoom("mouse", constrain(translate(scale(t, k), mousePoint, mouseLocation), g.extent));
In my case g.extent is undefined.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#41, or mute the thread
https://github.com/notifications/unsubscribe/AAOEjT9b3_V3b1zEIcbgz2aIKVuQmhyBks5qTC-xgaJpZM4JGk7t
.
from d3-zoom.
I hit this while trying to figure out how to implement zooming so the code is somewhat dirty. There are also sample data I'm using.
https://gist.github.com/martinek/106a9159426c7c13f5a6a06224da20d9
Edit: also this is using npm "d3": "^4.1.0"
.
from d3-zoom.
I’d say this is mostly a bug in your code, but maybe d3-zoom could handle this better. I wasn’t able to reproduce the error, but I did notice a bug bug investigating your code and I think it is the most likely cause.
The problem is that you’ve applied the zoom behavior twice: once to the G element and once to a child RECT element. With 🌶 for emphasis:
const svg = d3.select(elem).append("svg")
.attr("width", size.width)
.attr("height", size.height)
.append("g")
.call(zoom); // 🌶
// zoom panel
svg.append("rect")
.attr('class', 'zoom-panel')
.attr("width", size.width)
.attr("height", size.height)
.call(zoom); // 🌶🌶
So, when the wheel event is received, I think it’s possible that the zoom behavior could be confused: the zoom behavior isn’t able to handle multiple simultaneous wheel gestures, and the RECT and G element are treated as separate zoom gestures because you applied the zoom behavior to them separately.
I suspect this also has something to do with how the zoom behavior doesn’t consume wheel events that don’t trigger a change to zoom, thereby sometimes allowing both the RECT and G elements to start concurrent gestures, and then cause the race condition with the shared wheelTimer.
I think I can fix the error by making the wheelTimer state specific to the applied element rather than shared by the zoom behavior, but you’ll still want to fix your code so that the zoom behavior is only applied once.
Also… if you want your dates to parse across browsers you shouldn’t rely on Date.parse and instead use d3-time-format, e.g.,
var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S %Z");;
from d3-zoom.
Thanks for tips. That double zoom fixed some weird behavior I was getting.
from d3-zoom.
I pushed a fix in 1.0.2. If you have a chance to test it (with the double-zoom applied) and see if this fixes the TypeError, that would be helpful since I was never able to reproduce that error. You can load d3-zoom on top of the default D3 bundle:
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/d3-zoom.v1.js"></script>
If you can’t, no worries. I’ll push a new D3 patch release 4.1.1 tomorrow most likely.
from d3-zoom.
Related Issues (20)
- svg.call(d3.zoom().on('zoom',function(){})) warning : Argument of type 'ZoomBehavior<Element, unknown>' is not assignable to parameter of type '(selection: Selection<BaseType, unknown, HTMLElement, any>, ...args: any[]) => void'. HOT 2
- Option to pan with trackpad scroll and zoom with pinch? HOT 1
- Predefined events override manual transformations
- Mismatched link in README HOT 2
- documentation for zoom.on does not provide sufficient information to understand its use HOT 2
- Filtering doesn't work as expected for mouse events on macOS HOT 2
- Default zoom tween for translation animation surprising / More control over zoom animation tweens wanted HOT 2
- Zoom event listeners are passed an incorrect sourceEvent if a programmatic zoom occurs during a user zoom gesture
- Listen for zoom events with without d3-selection? HOT 2
- How to pan by dragging the trackpad with two fingers? HOT 1
- Zoom "end" is not called when pinch zooming and you start the zoom with the 2nd finger outside the chart HOT 2
- Navigator.maxTouchPoints is always 0 and should not be used
- selection.interrupt is not a function,
- iPhone Performance issues since iOS 16 HOT 1
- Zoom performance issues from iOS 16 onwards HOT 3
- function scale in Transform should support kX and kY instead of k HOT 1
- First zoom doesn't move scale to within scaleExtent HOT 2
- Referencing width on SVGElement when expected type is actually SVGSVGElement HOT 1
- Zoom Behaviour: disabling zoom.click and zoom.dblclick doesn't actually stop zoom behaviour from firing.
- select(...).transition is not a function HOT 1
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-zoom.