d3 / d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Home Page:https://d3js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

d3 hierarchy: node visibility parameter to control either to show node in visualization or hide it.

rashidotm opened this issue Β· comments

Hi,

Thanks for the work maintaining d3 and making it more elegant. πŸ’šπŸ’š

Consider the following example for toggling a node in a tree.

function toggleNode(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else if (d._children) {
    d.children = d._children;
    d._children = null;
  }
}

This kind of swapping leads to more customization to handle d._children so rather than dealing with one array of children you now have to deal with two. and in case you want to have partial hiding of nodes, then you will ultimately end up with 3 arrays to contain each list (toggled on, toggled off, hidden).

Rather than toggling between d.children & d._children & maintaining another array for hidden nodes, I suggest to have a parameter on the node itself d.visible which defaults to true and be shown on the visualization if d.visible == true. but if d.visible == false then it is not shown in visualization and all of that is built into the library in handling the hierarchy and tree calculation. this will definitely lead for simpler usage and less handling on client side of the d3 library.

I looked up the documentation and this feature is not built in d3 by default. there are some answers on SO but as I mentioned it leads to heavier customization on client side.

see this for example:
https://stackoverflow.com/questions/29873947/hide-unrelated-parent-nodes-but-child-node-in-d3-js

if this feature is already available or If I am missing a major thing that may help achieve this goal then please let me know. otherwise consider this as a feature request.

thanks