javascript - 树布局 - 链接 - 数据格式

Question

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

Answer 1

至于您希望将选定的节点作为树的新根，我发现了这个fiddle我不久前开始整理的。它头脑简单，可以做很多事情来改进它，但它应该为您提供一个合理的开始。

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