Closed Momen-Mawad closed 1 year ago
In the below code the prop renderCustomNodeElement does not render any custom values I provide. Every other prop seems to work fine except this one.
renderCustomNodeElement
import React, { useState, useEffect } from 'react'; import Tree from "react-d3-tree"; import { useCenteredTree } from "./helpers"; import "./Tree.css"; import Cookies from 'js-cookie'; import { load_tree } from '../actions/tree'; import { connect } from 'react-redux'; const mapStateToProps = state => ({ tree: state.tree }); const renderRectSvgNode = ({ nodeDatum, toggleNode }) => ( <g> <rect width="20" height="20" x="-10" onClick={toggleNode} /> <text fill="black" strokeWidth="1" x="20"> {nodeDatum.name} </text> {nodeDatum.attributes?.department && ( <text fill="black" x="20" dy="20" strokeWidth="1"> Department: {nodeDatum.attributes?.department} </text> )} </g> ); export function TreeGraph({tree}) { const containerStyles = { width: "100vw", height: "100vh" }; const [dimensions, translate, containerRef] = useCenteredTree(); const nodeSize = { x: 100, y: 100 }; const foreignObjectProps = { width: nodeSize.x, height: nodeSize.y, x: -100 }; const renderRectSvgNode = ({ nodeDatum, toggleNode }) => ( <g> <rect width="20" height="20" x="-10" onClick={toggleNode} /> <text fill="black" strokeWidth="1" x="20"> {nodeDatum.name} </text> {nodeDatum.attributes?.department && ( <text fill="black" x="20" dy="20" strokeWidth="1"> Department: {nodeDatum.attributes?.department} </text> )} </g> ); const makeTree = (familyData, CustomNodeElementFunction, nodeSize) => { console.log(CustomNodeElementFunction); return ( <Tree data={familyData} translate={translate} nodeSize={nodeSize} renderCustomNodeElement={CustomNodeElementFunction} pathFunc="step" initialDepth="1" orientation="vertical" /> );} return ( <div dir="ltr" style={containerStyles} ref={containerRef}> { typeof tree.payload !== 'undefined' && tree.payload.length > 0 ? makeTree(tree.payload, renderRectSvgNode, nodeSize) : makeTree({}, renderRectSvgNode, nodeSize) } </div> ); } export default connect(mapStateToProps)(TreeGraph);
It turned out I was using an old version of react-d3-tree and had to update it.
react-d3-tree
In the below code the prop
renderCustomNodeElement
does not render any custom values I provide. Every other prop seems to work fine except this one.