display my own nodes style without circles

[tzookb]

class NodeLabel extends React.PureComponent {
    render() {
      const {className, nodeData} = this.props
      return (
        <div className={className} style={{border: '1px solid black'}}>
          <h2>{nodeData.name}</h2>
          {nodeData._children && 
            <button>{nodeData._collapsed ? 'Expand' : 'Collapse'}</button>
          }
        </div>
      )
    }
  }


                       <Tree 
                            data={[treeObj]} 
                            orientation="vertical" 
                            translate={{x:400, y: 50}}
                            allowForeignObjects
                            nodeLabelComponent={{
                                render: <NodeLabel className='myLabelComponentInSvg' />,
                                foreignObjectWrapper: {
                                y: 24
                                }
                            }}
                            />

I want to have my own boxes design, but that the lines will be connected to the boxes and not circles. Is that achievable now?

Thanks

[bkrem]

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.

[bkrem]

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 :)

[tzookb]

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 👍

[dyennam]

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: {
                }
              }}
            />

[bkrem]

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

[dyennam]

@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

[Ben-Tai]

@dyennam did you manage to figure this out?

[dyennam]

@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.

[bkrem]

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.