Блог

Я создаю карту хранилища, используя React и «react-d3-дерево». Это должно помочь мне управлять всеми инструментами и запасными частями на моей лодке.

Я мало что знаю о D3, так что на данном этапе это просто доказательство концепции. Я должен уметь управлять деревом, добавляя и удаляя узлы во время отображения графика. Я ожидал, что график будет отображаться повторно при изменении данных, но этого не происходит. Я не могу найти ни подтверждения, ни опровержения в документации пакета, поэтому я подумал, что задаю вопрос здесь.

Я вложу соответствующие файлы, но в основном я отображаю начальное дерево, хранящееся в файле, затем в onNodeClick функции я добавляю дочерний узел, и на графике ничего не происходит, т. е. Изменение не отражается. Журналы подтверждают, что узел добавлен правильно, но визуального подтверждения нет. Вот файлы…

InitialTree.js

 export const InitialTree = {
  name: 'Storage Map',
  children: [
    {
      name: 'Engine Room',
      children: [
        {
          name: 'portside',
          attributes: {
            1: 'oil filter',
            2: 'v-belt',
          },
        },
        {
          name: 'starboard',
          attributes: {
            1: 'various hoses',
            2: 'grinder discs',
          },
        },
      ],
    },
    {
      name: 'Saloon',
      children: [
        {
          name: 'Desk',
          children: [
            {
              name: 'Left Drawer',
              attributes: {
                1: 'electronics',
                2: 'hard discs',
              },
            },
            {
              name: 'Right Drawer',
              attributes: {
                1: 'electrics',
                2: 'fuses',
              },
            },
            {
              name: 'Hidden Drawer',
              attributes: {
                1: 'ship documents',
                2: 'personal documents',
              },
            },
          ],
        },
        {
          name: 'Foreman1',
          attributes: {
            department: 'Assembly',
          },
          children: [
            {
              name: 'Worker1',
            },
            {
              name: 'Worker2',
            },
            {
              name: 'Worker3',
            },
          ],
        },
      ],
    },
  ],
}

export default InitialTree
 

App.js

 import React, { useState } from 'react'
import ShowTree from './components/ShowTree'
import InitialTree from './components/InitialTree'
import './App.css'

export const App = () => {
  const [store, setStore] = useState(
    InitialTree || { name: 'Storage Map', children: [] }
  )

  const processHandleNodeClick = async (node) => {
    if (node.__rd3t.collapsed === false) {
      const newStore = store
      const newChild = { name: 'Lazarette', children: ['A Shelf', 'A Rack'] }
      newStore.children.push(newChild)
      console.log('newStore', newStore)
      await setStore(() => newStore)
      console.log('store', store)
    }
  }
  return (
    <div className="App">
      <ShowTree store={store} processHandleNodeClick={processHandleNodeClick} />
    </div>
  )
}

export default App
 

ShowTree.js

 import React, { useState } from 'react'
import Tree from 'react-d3-tree'
import '../App.css'

export const ShowTree = (props) => {
  console.log('props', props)

  const [orientation, setOrientation] = useState('vertical')

  const handleNodeClick = (node) => {
    console.log('clicked', node)
    props.processHandleNodeClick(node)
  }

  const handleLinkClick = (link) => {
    console.log('clicked', link)
    setOrientation(() =>
      orientation === 'vertical' ? 'horizontal' : 'vertical'
    )
  }

  return (
    <div id="treeWrapper" style={{ width: '80em', height: '50em' }}>
      <Tree
        data={props.store}
        depthFactor="100"
        collapsible={true}
        initialDepth="5"
        nodeSize={{ x: 20, y: 20 }}
        orientation={orientation}
        pathFunc="diagonal" // diagonal, straight, elbow, step
        separation={{ nonSiblings: 15, siblings: 15 }}
        zoomable={true}
        zoom="0.5"
        onNodeClick={handleNodeClick}
        onLinkClick={handleLinkClick}
      />
    </div>
  )
}

export default ShowTree
 

I know this is not the most popular package in npm but maybe someone knows the answer or can recommend an equivalent but working solution.
Btw the onLinkClick option is not working either, ie the links between the nodes are not clickable contrary to what the documentation says, but this is a minor issue for me.
Thanks for your help.