我正在开展一个项目,我希望展示网站中的各种文件如何相互影响。我认为使用D3这将是一个相当简单的任务,但现在我想知道我的json数据是如何排列的。以下是我的数据示例:
{
"pages" : [{
"ID" : "1",
"name" : "config.xml",
"class" : "dvs",
"path" : "/config.xml",
"children" : [{"dvs":"2","dvs":"3","sites":"4","sites":"5"}]
},{
"ID" : "2",
"name" : "site-pages.xml",
"class" : "dvs",
"path" : "/pages/site-pages.xml",
"children" : [{"dvs":"1"}]
},{
"ID" : "3",
"name" : "customscripts.vm",
"class" : "sites",
"path" : "components/customscripts.vm",
"children" : [{"dvs":"1","sites":"4","sites":"5"}]
},{
"ID" : "4",
"name" : "badge.vm",
"class" : "sites",
"path" : "components/badge.vm",
"children" : [{"dvs":"1","sites":"3"}]
},{
"ID" : "5",
"name" : "price.vm",
"class" : "sites",
"path" : "components/price.vm",
"children" : [{"dvs":"1","sites":"3"}]
}]
}
我的计划是使用ID来显示文件和类之间的链接,以对文件类型进行颜色编码。当我开始研究d3.layout.tree()时,我开始意识到布局似乎非常依赖于具有特定的数据模型,即:
{ "name" : "foo",
"children" : [{
"name" : "bar",
"children" : [{
}]
}]
}
等等等等
我认为传递到d3.layout.tree()的数据必须与那个确切的格式相匹配吗?
最终,我希望我能够使我的数据树的每个节点都可以点击,这会将该节点变成图的根节点,但也许这是不可能的?
有关数据格式化和d3.layout.tree()的任何指导/建议都将不胜感激。
答案 0 :(得分:1)
至于你希望将一个选定的节点作为树的新根,我挖掘出了我之前开始组装的fiddle。它很简单,可以做很多改进,但它应该为你提供一个合理的开始。
function click(d) {
update(d.depth == 0 ? root : d)
}