树布局 - 链接 - 数据格式

时间:2014-02-09 22:17:37

标签: javascript json d3.js tree

我正在开展一个项目,我希望展示网站中的各种文件如何相互影响。我认为使用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()的任何指导/建议都将不胜感激。

1 个答案:

答案 0 :(得分:1)

至于你希望将一个选定的节点作为树的新根,我挖掘出了我之前开始组装的fiddle。它很简单,可以做很多改进,但它应该为你提供一个合理的开始。

function click(d) {    
    update(d.depth == 0 ? root : d)
}