Use images instead of svg circle (react-d3-tree)

Question

I recently updated to version 2.0.1 and I am struggling to set images instead of svg circles to individual nodes. In the older versions I used nodeSvgShape property:

nodeSvgShape: {
  shape: 'image',
  shapeProps: {
     href: AppState.config.api.img + mainTile.image,
     width: 100,
     height: 100,
     x: -50,
     y: -17,
  },
},

However in the current version this does nothing. Is there any way how can I achieve this in the current version?

Thank you in advance

Answer 1

If you are still having this issue after a year, here is how I did this.

I was able to do this with other SVG images by using the renderCustomNodeElement properties of the Tree component. By passing a render function that you create, you are able to apply the render function to each node (found on the docs here: https://www.npmjs.com/package/react-d3-tree#styling-nodes ).

Below is an example of how to implement it, say using an object that maps the name of the node to an SVG string and then passing that to the Tree component:

import SVG from 'react-inlinesvg';


const renderMol = ({ nodeDatum, toggleNode }) => (
    <g>
        <SVG src={svgMapping[nodeDatum.name]}/>
    </g>
);
return (
    <Tree data={mydata}
          renderCustomNodeElement={nameOrMol} />
)