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