D3 - accessing nested data for the purpose of creating a navigation tree
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.