树布局 - 链接 - 数据格式答案

【问题标题】：Tree Layout - Links - Data Formatting树布局 - 链接 - 数据格式
【发布时间】：2014-02-09 22:17:37
【问题描述】：

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

【问题讨论】：

不，您不必遵循那个确切的格式。根据您的描述，听起来您想要一个图表而不是一棵树。你如何确定哪些页面是连接的？
d3.layout.tree() 的选项之一是 tree.links(nodes)，它在树中的各个节点之间创建链接。我希望我可以通过将子 ID 与节点 ID 匹配来创建到节点的链接。
我也有同样的问题！

标签： javascript json d3.js tree

【解决方案1】：

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

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

【讨论】：