I've been working on code to create an indented tree structure. My goal is to initially collapse the tree and show only the first level children or the root node. I tried a few different approaches, but none were successful. The current portion I have below was my latest attempt:
function toggleAll(d) {
if (d.children) {
d.children.forEach(toggleAll);
toggle(d);
}
}
root.children.forEach(toggleAll);
toggle(root);
});
Below is the HTML along with the corresponding flare.json file:
<meta charset="utf-8">
<style>
.node rect {
cursor: pointer;
fill: #fff;
fill-opacity: 0.8;
stroke: #3182bd;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
pointer-events: none;
}
.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// JavaScript code for creating the tree structure
</script>
The content of flare.json:
"name": "flare",
"children": [
{
"name": "vis",
"children": [
{
"name": "events",
"children": [
{"name": "DataEvent", "size": 2200},
{"name": "SelectionEvent", "size": 1400},
{"name": "TooltipEvent", "size": 1200},
{"name": "VisualizationEvent", "size": 825}
]
}
]
}
]
}