Блог

Я хочу добавить несколько изображений в свои данные JSON, из которых данные дерева берут все данные..

Я просто не мог этого сделать

У кого-нибудь есть опыт в этой области?..

 const renderRectSvgNode = ({ nodeDatum, toggleNode }) => (
     <g>
        <circle cx="0" cy="10" r="10" fill="blue" onClick={toggleNode} />
        <text fill="blue" strokeWidth="1" x="20">
          {nodeDatum.name}
        </text>
        {nodeDatum.attributes?.department amp;amp; (
          <text fill="green" x="20" dy="20" strokeWidth="1">
            Department: {nodeDatum.attributes?.department}
          </text> 
        )}
      </g>
);

export default function App() {
  const [translate, containerRef] = useCenteredTree();
  return (
     <div style={containerStyles} ref={containerRef} >
          <Tree
            data={orgChartJson}
            translate={translate}
            renderCustomNodeElement={renderRectSvgNode}
            orientation="vertical"
          />
        </div>
      );
}

    export const useCenteredTree = (defaultTranslate = { x: 0, y: 0 }) => {
      const [translate, setTranslate] = useState(defaultTranslate);
      const containerRef = useCallback((containerElem) => {
        if (containerElem !== null) {
          const { width, height } = containerElem.getBoundingClientRect();
          setTranslate({ x: width / 2, y: height / 2 });
        }
      }, []);
      return [translate, containerRef];
    };