bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.07k stars 270 forks source link

Click the node and get data from API Dynamically #201

Open ahmetsezen opened 5 years ago

ahmetsezen commented 5 years ago

Thank you for taking the time to report an issue with react-d3-tree!

Feel free to delete any questions that do not apply.

What is the behavior/output you expect?

We want to make our graph with API. We have a binary system as shown in figure below. Screenshot from 2019-04-03 12-21-55

API link format: www.localhost.com/id/123 (example) Our API format like that: this info related with 123. user (example)

[{
        name: 'Ali',
        user_id: 123,
        children: [
          {
            name: 'Veli',
            user_id:101,
            children: []
          },
          {
            name: 'Hasan',
            user_id:104,
            children: []
          },
]}]

this info related with 101. user

[{
        name: 'Veli',
        user_id: 101,
        children: [
          {
            name: 'Ahmet',
            user_id:998,
            children: []
          },
          {
            name: 'Mehmet',
            user_id:505,
            children: []
          },
]}]

For example, when we click the first node we want to send the request to our API then we want to show their children then we want to click their children then we want to get their children's children dynamically.Is it possible ? I hope you could get idea what we want. Thanks from now.

Can you consistently reproduce the issue/create a reproduction case (e.g. on https://codesandbox.io)?

[Replace with your answer if relevant]

What version of react-d3-tree are you using?

"react-d3-tree": "^1.12.3",

francisngo commented 5 years ago

I would like to see if this is possible as well. My version isn't a binary tree but instead nodes with n children and/or none.

McJezuss commented 3 years ago

I see this is still open. I am working with the same sort of structure, whereby a person can have multiple children and those children can have children, etc.

On node click, I have managed to pull the children from our API and format it in the right way, but when I update the data in the tree state, the tree rerenders I believe, and when I click again it tries to fetch the data again, so I made sure to check if it already fetched that specific level and if it doesn't, it just passes, but now the onClick event isn't actually fired anymore. Either that or the internal tree state isn't updated. If the latter is the case, is there a way to forcefully update it?