Error "Cannot read property 'property' of undefined"

[shofman10]

Hi, when I try to add zoom functionality for regular HTML content, I can't seem to get it to work. I'm importing the right plugins with NPM:
import * as d3 from 'd3';
import * as d3Zoom from 'd3-zoom';
import * as d3Select from 'd3-selection';

and then on load of my app I'm calling:
let zoom = d3.zoom();
let selection = d3.select('.seat-selector-content');
selection.call(d3.zoom().scaleExtent([1, 8]).on("zoom", zoom));

No errors on initial load but when i try to use my mouse wheel to zoom on the html, I get the error "Cannot read property 'property' of undefined".

If I click through the console error to the code it comes to this function:
function zoom(selection) {
selection
.property("__zoom", defaultTransform)
.on("wheel.zoom", wheeled)
.on("mousedown.zoom", mousedowned)
.on("dblclick.zoom", dblclicked)
.filter(touchable)
.on("touchstart.zoom", touchstarted)
.on("touchmove.zoom", touchmoved)
.on("touchend.zoom touchcancel.zoom", touchended)
.style("touch-action", "none")
.style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
}

[mbostock]

This implies that you are invoking the zoom behavior with an undefined selection. I’m not sure why that would be based on your code snippet.

I also note that you’re combining the D3 default bundle (import … from "d3") together with imports from individual D3 modules (e.g., import … from "d3-selection"). You shouldn’t do this because the D3 default bundle already includes these bundles, and by importing from both, you are likely to get duplicate copies of the code, and this could be causing some of the problems you are seeing. (This is a frequent cause of d3.event being null, for example, though this will be going away in d3-selection@2. See d3/d3-selection#191.)

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗

[mbostock]

Edit: I see now you said the error doesn’t occur until you wheel. At any rate, you should post a reproduction of your error if you want help debugging. It’s practically impossible to guess what could be wrong from a snippet, and I would be wasting both of our time speculating. Good luck!

[shofman10]

Edit: I see now you said the error doesn’t occur until you wheel. At any rate, you should post a reproduction of your error if you want help debugging. It’s practically impossible to guess what could be wrong from a snippet, and I would be wasting both of our time speculating. Good luck!

Sorry about that! Here's a code pen that shows the same console error with a basic setup: https://codepen.io/shofman10/pen/BXxKxJ

[mbostock]

The problem is that you’re invoking the zoom instance on zoom:

selection.on("zoom", zoom);

You probably mean to call your zoom event handler instead?

selection.on("zoom", zoomed);

function zoomed() {
  console.log(d3.event);
}

[shofman10]

That worked and I was able to get it zooming in/out after that :D sooooo happy thanks!