svg - Cola.js + d3.js 强制定向网络 - 在强制求解器运行期间/之后约束节点

Question

我正在使用 Cola.js 和 d3.js 创建一个力导向的层次结构图。节点使用 Y 约束堆叠在行上，我根据层次结构中给定节点的最大深度预先计算了这些约束。

是否有使用 Cola.js 结合力求解器将节点约束到列的好方法？我想将节点围绕 Y 居中，但也使用力求解器的定位来计算最短边距，从而最大限度地减少边交叉。

目标是使绘图拖得不那么“松软”，因此在力解算器定位之后/期间，节点应被约束到列。下面提供的 fiddle 效果很好，但是对于非常大的网络，网络的整体惯性很高，因此拖动单个节点不会像我想要的那样快地移动整个网络。

如果有办法加强力求解器，以便拖动节点快速移动整个网络，则可以代替使用 X 偏移约束。 Cola 试图通过消除 d3 具有的一些力选项(例如电荷和重力)来简化节点求解器，因此我不能使用这些 (?) 来更快速地拖动网络。

由于可乐在运行求解器之前将约束作为参数，因此在保持最佳节点定位的同时设置约束被证明是困难的。

...(示例代码太大无法粘贴)

d3cola
    .nodes(graph.nodes)
    .links(graph.relationships)
    .constraints(graph.constraints)
    .symmetricDiffLinkLengths(30)
    .start(5,10,20);

...

fiddle : http://jsfiddle.net/k54ohxor/1/

可乐对齐示例: http://marvl.infotech.monash.edu/webcola/examples/alignment.html



在上面的示例屏幕截图中，查看层次结构的深度级别 3，您可以看到，如果我按照节点从数据库中进入的顺序预先约束节点，则会导致节点定位不佳和不需要的边缘交叉，因为节点 ID 的顺序为 7,6,9,8

谢谢

Answer 1

如果我理解正确，您希望能够在网络中拖动一个节点并使整个网络跟随而没有任何弹性吗？

您可以做的一件事是创建一对对齐约束(x 和 y)，以保留来自初始布局的节点之间的相对水平和垂直间隔。也就是说，使用对 d3cola.start(5,10,20) 的第一次调用的结果(增加传入的数字以控制初始布局的迭代次数)来确定 x 和 y 偏移量的对齐约束，然后添加.

另一个问题是，如果您只想拖动整个图形，就好像它是一个刚性的单个对象，为什么不只允许在 SVG 中拖动父组而不是让可乐来做呢？你提到了列，所以也许你只想创建一个 x 对齐约束？