所以我一直在使用d3的缩放圆(http://mbostock.github.com/d3/talk/20111116/pack-hierarchy.html):
数据作为json数组(包含几个不同级别的数组和对象)传递到d3脚本。
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"
}
],
}
],
}
我没有显示圆圈的问题。我现在正在尝试在侧面绘制导航显示,以映射出数据的层次结构。理想情况下,我想要的是这样的东西:
<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>
这是一个基本的列表结构。我唯一能做的就是访问数据中的1级。我使用“divs”只是首先尝试降低结构。
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; });
在那之后,我再也无法继续进行关卡了。我当时以为递归方法可能是最好的方法。我在下面尝试了此功能,但它只是将div附加到顶部div,而不是父节点。
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);
任何有关如何将 child 附加到 parent 或如何从多个级别访问数据的建议,将不胜感激。
最佳答案
缺口!这是一个示例的完整代码,该示例创建您在问题中描述的列表:(可能会有更好的代码来执行相同的操作,但是该代码可以正常工作并产生您所说的内容的100%)(当然,这仅是一个起点,您自然会开发出更真实的导航)
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]);
};
};
};
};
这将产生以下页面:
希望这对您有帮助。
如果您还有其他问题,请告诉我。