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

Question

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

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

我们的目标是使绘图的拖拽不那么“松软”，因此在力求解器定位之后/期间应将节点限制在列上。下面提供的小提琴效果很好，但是对于非常大的网络，网络的整体惯性很高，因此拖动单个节点不会像我想要的那样快速移动整个网络。

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

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

...（示例代码太大，无法粘贴）

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

...

小提琴：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 对齐约束？