树布局 - 链接 - 数据格式

我正在一个项目中，我想展示一个网站内的各种文件如何互相交互。我认为这将是一个相当简单的任务使用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（）的指导/建议将不胜感激。

来源

2014-02-09 uberHasu

不，您不必遵循确切的格式。从你的描述来看，这听起来像你会想要一张图而不是一棵树。你如何确定哪些页面连接？ –

d3.layout.tree（）的一个选项是tree.links（节点），它在树中的各个节点之间创建链接。我希望能够通过将儿童ID与节点ID进行匹配来创建节点链接。 – uberHasu

我也有同样的问题！ – 2017-08-23 05:39:41

至于你想制作一个选定的节点树的新根，我发掘了这个fiddle，我开始把它放在一起。它很简单，可以做很多事情来改善它，但它应该为你提供一个合理的开始。

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

来源

2014-02-09 23:04:17 FernOfTheAndes

树布局 - 链接 - 数据格式

回答

相关问题