Ability to toggle depths from remote input

[RohanDamani]

I have filters associated with different levels of the tree, as the user toggles which level they are on, I'd like the tree to respond to be open to that level.

I tried passing different values to initialDepth as props, however there is no rerender.

Is this possible?

[alexlamasdev]

I've faced a similar issue which required me to pass different values to the initialDepth prop and force a re-mount in order for the Tree to display at the desired depth. What worked for me is, pass a React key prop to the Tree component and toggle that key between true/false whenever a re-render is desired. See the following (very rough) pseudocode:

const dynamicDepth = __;
const forceRemount = true;
const handler = () => {
  // Do stuff
  dynamicDepth = dynamicDepth + 1; // or whatever you want it to be
  forceRemount = !forceRemount;
}
<Tree data={myData} 
      initialDepth={dynamicDepth} 
      key={forceRemount}
      onClick={handler} 
      collapsible={false} />

Changing the value of the key prop passed to Tree will force the component to re-mount (see this stackoverflow response). Of course, this is a very hacky way of accomplishing the desired functionality, and you lose the slick animation when navigating through levels in the tree. Interested to see if there are any better solutions. I think it would be better if we could specify the render depth at any point in the component's lifecycle.

[bkrem]

Yeah the initialDepth functionality is pretty rudimentary as it stands currently. It also doesn't do what you expect with async loaded data via treeUtil, i.e. it won't apply initialDepth once the new data set is passed in.

Nice workaround with the key prop @alexlamasBV, hadn't considered that.

Going to prioritise this if it's getting in the way of getting expected behaviour. Would happily accept a PR from you guys in the meantime since I don't know when I can address this, hopefully before the weekend is over.

Essentially what needs to happen is that the initialRender boolean in the Tree component should reset to true if a "fresh" data set is passed into the component. Then generateTree() + setInitialTreeDepth() should take care of the rest if all goes well :)

[RohanDamani]

@alexlamasBV great workaround - I'm passing key={dynamicDepth} to trigger the change

@bkrem thanks for adding. I may eventually need the ability to close all nodes at a certain depth as a new one at that depth is opened, so I'm not showing too many nodes. Right now setting separation={{siblings: .5}} to reduce the space between nodes, the nodes overlap if more than one node on that depth is open.

That being said, I also plan on contributing as I can, right now I'm new to and learning d3.

[bkrem]

@RohanDamani Hmm I think that's expected behaviour for setting siblings: 0.5, since the number represents a factor of node width. As in siblings: 1, nonSiblings: 2 would mean "separate sibling nodes by 1x node width and nonSiblings by 2x node width" (https://github.com/d3/d3-3.x-api-reference/blob/master/Tree-Layout.md#tree).

What you probably want to do is change nodeSize on the y-axis, that should move the nodes closer together.

Could you add a feature request issue for "collapsing all nodes except the clicked one at depth x"? I'll start thinking about that since it's a good point.

[RohanDamani]

@bkrem good call nodeSize is what I was looking for. My tree is looking good!

I added issue https://github.com/bkrem/react-d3-tree/issues/46, same as mentioned above, for collapsing nodes as a new one opens.

I also added https://github.com/bkrem/react-d3-tree/issues/47 - this is related to reading initialDepth as the data set changes. The idea for this one is to be able to smoothly use the tree with a set of filters for the data.

Thanks again and please let me know if you need more info. Hoping this is more helpful than headache!

[grg-akshay]

@bkrem Any updates here? This is a very old issue and this is still troubling us. Can you please take this on priority?