Quantcast
Channel: SCN : All Content - All Communities
Viewing all articles
Browse latest Browse all 8338

DS SDK : Expand hierarchy in visualization

$
0
0

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:

 

DS_Tree.png

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

 

DS_Tree_CT.png

 

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.
functionclick(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


Viewing all articles
Browse latest Browse all 8338

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>