2013-10-10 59 views
1

我正在使用强制导向图来构建一种流程图。它工作正常,但节点没有特定的顺序。他们是随机的。我希望图表遵循分层次序。D3强制导向图节点按顺序

var force = d3.layout.force() 
    .nodes(d3.values(nodes)) 
    .links(links) 
    .size([width, height]) 
    .linkDistance(90) 
    .gravity(0.6) 
    .charge(-2000) 
    .linkStrength(0.3); 

我想给节点一些(数值)层次结构。没有明确定义他们的位置。

任何帮助将不胜感激。

+0

你所说的 “秩序” 是什么意思?你想控制节点的位置还是创建分层结构? –

+2

我认为使用简单的“强制定向布局”并且拥有层次结构根本不能很好地结合在一起。对于流程图和等级顺序,您应该看看像这样的基于Sugiyama的算法:[Hierarchical layout Demo](http://live.yworks.com/yfiles-for-html/1.1/demos/Complete/demo.yfiles .layout.incrementalhierarchiclayouter/index.html) - 这不是D3,但因此只是一个评论:-) – Sebastian

回答

3

您可以使用定量聚焦的力布局,以便节点基于其数字层次结构进行定位。从麦克的talk(和代码)的演示:

问候

+0

*定量focii *你仍然必须明确定义focii的位置,这是OP试图避免。另外我也没有看到链接的演示与这两者之间的关系。 – Sebastian

+1

如果一个节点有多个父节点,则不能使用分层布局。该演示展示了力布局中的节点如何根据数字属性显示在不同的垂直位置(当然,仍然需要从数字层级到垂直位置的映射)。该演示不显示链接,但很容易添加它们。 –

+3

在图形绘制术语中,“层次布局”不仅用于描述树状结构。任何数量的父母和孩子都可以在这里。我的印象是OP正在寻找[Sugiyama风格的层次布局](http://en.wikipedia.org/wiki/Layered_graph_drawing)。在这种情况下,您不必指定任何坐标,“数字层次结构”可以直接映射到图形中的图层 - 然后通过算法确定确切的坐标。 – Sebastian