Transition from D3v5 to v6 Zoom help *Editted*

Community Help
1

So I’m trying to transition my project from d5 to d6, and came across the error of event being deprecated. I’ve tried converting it based off The Migration Guide but it only throws errors.

Here is my code after trying to convert it

_zoomConfig = () => {
    const selector = d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`);

    const zoomObject = d3Zoom().scaleExtent([this.state.config.minZoom, this.state.config.maxZoom]);

    if (!this.state.config.freezeAllDragEvents) {
      zoomObject.call(d3Zoom()
          .on("zoom", function zoomed({transform}, d) {
                d3SelectAll(`#${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`)
                                  .attr("transform", transform);
          }));
    }

    if (this.state.config.initialZoom !== null) {
      zoomObject.scaleTo(selector, this.state.config.initialZoom);
    }

    // avoid double click on graph to trigger zoom
    selector.call(zoomObject).on("dblclick.zoom", null);
  };

However, I keep getting this error thrown when it’s like this?

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'property')
    at Function.zoom (zoom.js:73)
    at Graph._zoomConfig (Graph.jsx:314)
    at Graph.componentDidMount (Graph.jsx:662)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
    at neo4j.provider.js:59
    at <anonymous>

It seems to be coming from the zoomObject.call() line, however, I’ve confirmed (printed) zoomObject and it prints as this

ƒ zoom(selection) {
    selection.property("__zoom", defaultTransform).on("wheel.zoom", wheeled, {
      passive: false
    }).on("mousedown.zoom", mousedowned).on("dblclick.zoom", dblclicked).filter(t…
2

This is probably explained in this part of the V6 Migration guide.

1 Like