网络多路正交图中d3.js
问题描述:
我们想用D3绘制网络行车路线图已定开始和结束节点,但两者之间可能会共享一些节点不同的路径,例如: 网络多路正交图中d3.js
我读Configure fixed-layout static graph in d3.js意见,并成功创建了一个简单的图形,如:
但正如我增加更多的节点,以图成为随机的(不刷新后静态),而不是正交了:
所以我的问题是:
- 是否有可能使用d3.js吸引了接近所需 图?
- 还是有一个算法,我应该在我的 图实现?
答
看到这里我的演示。
http://jsfiddle.net/doraeimo/JEcdS/
主要的想法是让基于一个树状结构连通。
//1)temporarily convert a connectivity to a tree
var tree = conv2tree(data);
//2)calculate for nodes' coords with <code>cluster.nodes(tree);</code>
var nodes = buildNodes(tree);
//3)append all the edges(links) of the connectivity
var links = buildLinks(data);
看起来您在添加新节点时正在初始化部队。这是使用强制导向布局吗?如果是这样,那么你需要删除对force.start()或force.restart()的引用,以防止其返回到强制指示状态。 – Elijah 2013-05-08 02:01:59
是的:我正在使用武力导向布局。你是否想要移除强制导向的布局?如何确保节点不会在没有斥力的情况下发生碰撞? – frank 2013-05-08 16:35:09