Hi,

I'm playing around with zooming on reusable charts and am getting the following error when actually doing the zoom:

Uncaught TypeError: Cannot read property 'k' of undefined at SVGRectElement.wheeled (d3.v4.js:16577) at SVGRectElement. (d3.v4.js:1533) wheeled @ d3.v4.js:16577 (anonymous) @ d3.v4.js:1533

The corresponding line that throws the error is: k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta.apply(this, arguments)))),

Please find my code here: https://gist.github.com/stehlifn/179fdeae49dd6f3424a3093fb71347a5 The cause of the error seems to be related to my logic in the file zoomableLineChart.js

I found the following issue which may be related to this:

41

As described in the above issue I'm calling zoom twice - once via

gEnter.append("rect")
                .attr("class", "zoom")
                .attr("width", innerWidth)
                .attr("height", innerHeightMain)
                .attr("transform", "translate(" + marginMain.left + "," + marginMain.top + ")")
                .call(zoom);   // error disappears when removing this call or the call below

and once via

function zoomChart(zoomFunction) {
                // error disappears when removing this call or the call above
                gEnter.select(".zoom").call(zoom.transform, zoomFunction);
}

Compared to the use case in the above issue I think I may not remove one of the calls as the first one is invoked when zooming on the line chart and the second is invoked when a zoom must be done because of brushing in the contextual chart.

Am I doing something wrong?

It sounds like the transform object you’re passing to zoom.transform is undefined. Maybe zoomFunction is undefined in your code?

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! 🤗

d3 / d3-zoom

Uncaught TypeError: Cannot read property 'k' of undefined from wheeled function when zooming #143

41