Nick! Here is the complete code of an example that creates lists that you described in the question: (there might be a nicer code to do the same thing, but this code works and produces 100% what you said) (if course, this is only a starting point, you will naturally develop further real navigation)
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body onload="load()">
<h2>Navigation</h2>
<h4>(using D3.js-generated navigation items)</h4>
</body>
</html>
script.js:
function load(){
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" }
],
}
],
};
buildNav(null, object);
function buildNav(parent_ul, node){
var current_ul, current_li;
if(parent_ul == null)
parent_ul = d3.select("body").append("ul");
current_li = parent_ul.append("li").text(node.name);
if (node.children) {
current_ul = current_li.append("ul");
for (var i=0; i<node.children.length; i++) {
buildNav(current_ul, node.children[i]);
};
};
};
};
This produces following page:
Hope this would help you.
Let me know if you have additional questions.