Cannot read properties of undefined (reading 'transform') - dTree with React

[NathanGavenski]

Hi, I'm trying to integrate dTree with React and I'm facing a bug that I can't seem to find the cause.

Here is a snippet of my code:

componentDidMount() {
        const treeData = [{
          name: 'Father',
          depthOffset: 1,
          marriages: [{
            spouse: {
              name: 'Mother',
            },
            children: [{
              name: 'Child',
            }],
          }],
          extra: {},
        }];

        const tree = dTree.init(
          treeData,
          {
            target: '#tag-canvas',
            debug: true,
            height: 800,
            width: 1200,
          },
        );
}

It gives me the error:

TypeError: Cannot read properties of undefined (reading 'transform')
    at SVGSVGElement.<anonymous> (dTree.js:52)
    at Dispatch.call (dispatch.js:57)
    at Gesture.emit (zoom.js:219)
    at Gesture.zoom (zoom.js:207)
    at SVGSVGElement.<anonymous> (zoom.js:92)
    at Selection.__WEBPACK_DEFAULT_EXPORT__ [as each] (each.js:5)
    at zoom.transform (zoom.js:91)
    at Selection.__WEBPACK_DEFAULT_EXPORT__ [as call] (call.js:4)
    at TreeBuilder.create (dTree.js:65)
    at Object.init (dTree.js:445)

I'm importing d3 and lodash on my index.js

import * as d3 from 'd3';
import _ from 'lodash';

window.d3 = d3;
window._ = _;

What am I missing?

[bill-kellogg]

Hey Nathan, I was able to resolve that same issue by downgrading D3 to v5 after finding this StackOverflow thread: https://stackoverflow.com/questions/63693132/unable-to-get-node-datum-on-mouseover-in-d3-v6/63693424#63693424

I don't have a proper fix yet for how to resolve it in the dTree library itself as I just started learning this lib and d3!

Hope that helps a little! Bill

[jocieldo]

If you are using the D3 v6 , just change the code of the builder.js .on('zoom', function (d) { g.attr('transform', d3.event.transform) }) to .on('zoom', function (event, d) { g.attr('transform', event.transform) })