Recently, I've been working with d3's zoom circle feature from here:
The data I'm dealing with is structured as a json array with various levels of arrays and objects.
object = {
class: "show",
name: "Game of Thrones",
children : [
{
class: "family",
name: "Starks",
children: [
{
class: "members",
name: "Rob"
},
{
class: "members",
name: "Jon Snow"
}
],
},
{
class: "family",
name: "Lannisters",
children: [
{
class: "members",
name: "Ser Jaime"
},
{
class: "members",
name: "Cersei"
}
],
}
],
}
Displaying the circles was not an issue, but now I'm attempting to create a navigation display on the side that outlines the hierarchical structure of the data. Essentially, I want something like this:
<ul>
<li> Game of Thrones
<ul>
<li> Starks
<ul>
<li> Rob </li>
<li> Jon Snow </li>
</ul>
</li>
<li> Lannisters
<ul>
<li> Ser Jaime </li>
<li> Cersei </li>
</ul>
</li>
</ul>
</li>
</ul>
I've only managed to access one level down in the data so far, using 'divs' to build the structure step by step.
var sentimentData = data.children;
var navBox = d3.select("body").append("body:div");
navBox
.attr("class", "navBox");
var sentimentNav = navBox.selectAll('div')
.data(sentimentData)
.enter()
.append('div')
.text(function(d){ return d.name; });
However, I've hit a roadblock when trying to proceed further down the hierarchy. My attempt at a recursive function below resulted in appending divs to the top node instead of their respective parent nodes.
function buildNav(d) {
if (d.children) {
children = d.children;
d3.select('body').append('div')
.data(children)
.enter()
.append('div')
.attr("class", function(d) {return d.name; });
children.forEach(buildNav);
d._children = d.children;
d.children = null;
}
}
buildNav(data);
If you have any suggestions on how to properly append children to parents or access data multiple levels down, I would greatly appreciate it.