Skip to Content
avatar image
Former Member

DS SDK : Expand hierarchy in visualization

Hello,

I'm working my way through some D3 visualizations and have managed to get a tree diagram working thanks to this example:

http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

The visualization takes a dimension object with an activated hierarchy and renders it like this:

With a crosstab component I can get the tree to expand:

Now I want to extend this to function like the Collapsible Tree from Mike Bostock:

http://bl.ocks.org/mbostock/4339083

I've incorporated the transitions from the update function, which all work well, but the problem comes with the click event, which is handled in the D3 code with this function:

// Toggle children on click.
function click(d) {
  if (d.children) {
  d._children = d.children;
  d.children = null;
  } else {
  d.children = d._children;
  d._children = null;
  }
  update(d);

This is called in the update function when the nodes are declared:

        // Declare the nodes

        var node = svg.selectAll("g.node")

        .data(nodes)

        .enter().append("g")

        .attr("class", "node")

        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

        .on("click", click);

I can see the event being fired, and d._children being switched with d.children, but nothing happens in my visualization. I even tried modifying the function to set the metadata property nodeState, hoping this would alter the datasource, but to no avail:

            function click(d) {

            if (d.children) {

              d._children = d.children;

              d.children = null;

              if (d.nodeState)

              {d.nodeState = "EXPANDED";}

            } else {

              d.children = d._children;

              d._children = null;

              if (d.nodeState)

              {d.nodeState = "COLLAPSED";}

            }

            update(d);

          }

In the console, I can see the property d.nodeState change from EXPANDED to COLLAPSED when I set the appropriate break point, but nothing changes in the viz 😔

I'm guessing I need to do something differently to interact with the data source and change it's state but I couldn't find anything in the guide. Unfortunately, the Simple Crosstab sample doesn't provide the expand/collapse functionality either, though it does render the plus signs that indicate a hierarchy node is available.

Any ideas on how I can add this interactivity to my extension would be very welcome.

Thanks,

Jim

DS_Tree.png (15.2 kB)
DS_Tree_CT.png (31.0 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Jan 09, 2015 at 04:27 AM

    If you can drop your project out on Github I will try to take a look. 😊

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Manfred Schwarz

      This was fantastic help Manfred ... thanks ever so much for the helping hand.

      Using the contribution.ztl with default functions seems to be the best way to handle expand/collapse from within a component, at least until such time the function can be made more responsive.

      I noticed a problem though that affects your extension as well. It seems that firing the event related to hierarchy expand/collapse:

      this.getDataSource().expandNode(this.getHierarchyDimensionKey(), this.getSelectedNodeKey());

      sometimes causes 2 updates to the component, and other times it doesn't cause any (depending on whether or not the node had been previously expanded). I added some conditional logic to work around this in the afterUpdate() function, especially since my extension requires a clicked node to be recreated after an expand/collapse event.

      I updated the GitHub with the final product. Thanks again!