display my own nodes style without circles about react-d3-tree HOT 9 CLOSED

Awesome work @bkrem

but I decided to build my own tree

as I noticed I need to connect the lines to centers of the node etc 👍

from react-d3-tree.

Hey @dyennam,

Here's a relatively simple way you can achieve what I think you're looking for with foreignObjects by leveraging the nodeLabelComponent, nodeSvgShape and nodeSize props:

https://codesandbox.io/s/zrw16nnxox

Note that I also moved the text you hardcoded in the card into each child's attributes key. This let's you pass whatever you want from within your node's dataset into nodeLabelComponent, since the component you use for nodeLabelComponent's render will be passed the respective node's nodeData as a prop :)

cc @tzookb, might be interesting for you too

from react-d3-tree.

Hi @tzookb,

Apologies for the wait. Removing the node element isn't actually possible right now, but I'll work on this later tonight or tomorrow since it should be possible to just pass none to svgShape.

That should then let you do what you suggested, although you'll most likely have to fiddle with the positioning/sizing of your boxes to make them align nicely with the graph.

from react-d3-tree.

Just released v1.9.1 with an option to set nodeSvgShape's shape key to 'none', meaning no svg shapes will be rendered for the nodes.

This should hopefully allow you to achieve what you were asking about :)

from react-d3-tree.

Hello @tzookb
Could you please give me an example of how you were able to build you tree with your boxes instead of the default nodes. I am trying to do a similar implementation where i want to override each node(CIRCLE) with like a bootstrap card element. But the cards i render are not getting attached at the node level, they are offset just like you mentioned in your original post.

@bkrem Any way we can have user interaction within foreignObjects? (Ex. clicking buttons inside nodes)

<Tree
              data={myTreeData}
              zoomable={true}
              scaleExtent={{min: 1, max: 3}}
              pathFunc='elbow'
              allowForeignObjects={true}
              nodeSvgShape={svgCircle}
              translate={{x:200, y: 200}}
              nodeLabelComponent={{
                render:
  <div>
    <div className='card'>
      <div className='card-body'>
        <h5 className='card-title'>Card title</h5>
        <h6 className='card-subtitle mb-2 text-muted'>Card subtitle</h6>
        <p className='card-text'>Some text to build on the card.</p>
      </div>
    </div>
  </div>,
                foreignObjectWrapper: {
                }
              }}
            />

from react-d3-tree.

@bkrem Thanks for the example, helped me out a bunch.
But if I want to take actions on the cards without it having to collapse / expand, how would i go about it? Like i want to be able to add child/sibling nodes, or capture on click events in certain regions to show popups or such things. I want to collapse on a button click per say, instead of on the node.
I have attached a example: https://codesandbox.io/s/ypz7rp61z

from react-d3-tree.

@dyennam did you manage to figure this out?

from react-d3-tree.

@dyennam did you manage to figure this out?

@Ben-Tai I wasn't able to figure it out. But to be honest to the dev, I haven't used this library in 8+ months. So not sure if it has been fixed or not either.

from react-d3-tree.

Closing since the discussion here has drifted from the issue topic onto other feature proposals. Feel free to open a feature request issue for said proposals if relevant.

from react-d3-tree.