I'm currently working on replicating a D3 zoomable treemap to gain a better understanding of D3 functionality. The original treemap can be found here:
TL;DR: My issue is that I am only able to see the first two children of the JSON object, but not the grandchildren and beyond. When I click on one of the children, instead of being redirected to '' (like in the original Ohio State treemap), an empty HTML document opens in my browser.
Debugging Efforts: In my console, I've stored the value of the JSON from 'zoomabletreemap.json' as 'treemap', and can access attributes like 'treemap.children[0].children'. But when I attempt to output these same children using console.log statements in my script, I receive 'undefined' for each child node below.
/* write children rectangles */
Additional details are shown below comparing expected versus actual output which clearly indicates there may be some overriding behavior occurring that removes the sub-nodes. I have compared my code with the source through to identify any significant differences, but none were spotted. Can someone guide me on identifying the error?
Here's a JS Fiddle link that presents the issue:
The related HTML and JS script can be seen below:
<!DOCTYPE html>
<!-- Placeholders -->
The mentioned file 'zoomabletreemap.json' contains the following structure:
{
"name": "Sitemap",
"children": [
<!-- Data goes here -->
]
}