How to Expand/Collapse onclick of Entire Node, not just the special button

[mzhukovs]

To make it easier for users to expand or collapse a node, especially when zoomed out a bit, I was trying to make it such that when the node is clicked ANYWHERE (not just the special, designated button) it would do so - how to achieve this? Tried using chart.onNodeClick() method coupled with setExpanded(node.id).render() but nothing happens.

Would appreciate any insight on this. And thanks to the creators/maintainers for the amazing library - truly great stuff.

[mzhukovs]

Interestingly, some other nice built-in methods seem to work just fine, e.g.:

        chart.onNodeClick( function(node) { 
             console.log(node.id);
             chart.setExpanded(node.id).render(); // does not work
             chart.setUpToTheRootHighlighted(node.id).render(); // works
        }); 

[bumbeishvili]

This is the code which is invoked after the designated button is clicked

.on("click", (event, d) => this.onButtonClick(event, d))

event is click event, d is the data. So I guess you could add your own event listener in nodeUpdate method, and then invoke this method in the handler

chart.nodeUpdate(function(d){
  d3.select(this)
       .select(`yourElementSelector`)
       .on('click',(e)=>chart.onButtonClick(e,d))
})

[mzhukovs]

Success! Thanks for the quick response and solution.