cytoscape.js - 在 cytoscape.js 中使用边缘权重进行力导向布局 (CoSE)

Question

我不确定如何最好地利用边缘权重(例如两种相互作用蛋白质之间的相互作用强度)，同时使用 cytoscape.js 中的 CoSE 插件生成力导向布局。有人可以提供任何指示。应该是“idealEdgeLength”还是“edgeElasticity”？

(编辑)以下是一个图表，显示了我目前得到的(A)以及我正在努力实现的目标(B)。下面也是我用于生成布局的参数。

谢谢，
达塔。

PS: Click to view显示当前(标记为“A”)和预期(标记为“B”)布局的图。以下是“A”的布局选项。

    var options = {
        name: 'cose',
        // Called on `layoutready`
        ready: function () { },
        // Called on `layoutstop`
        stop: function () { },
        // Whether to animate while running the layout
        animate: true,
        // Number of iterations between consecutive screen positions update (0 -> only updated on the end)
        refresh: 20,
        // Whether to fit the network view after when done
        fit: true,
        // Padding on fit
        padding: 30,
        // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
        boundingBox: undefined,
        componentSpacing: 100,
        // Whether to randomize node positions on the beginning
        randomize: true,
        // Whether to use the JS console to print debug messages
        debug: false,
        // Node repulsion (non overlapping) multiplier
        nodeRepulsion: 400000,
        // Node repulsion (overlapping) multiplier
        nodeOverlap: 10,
        // Ideal edge (non nested) length
        idealEdgeLength: 10,
        // Divisor to compute edge forces
        edgeElasticity: 100,
        // Nesting factor (multiplier) to compute ideal edge length for nested edges
        nestingFactor: 5,
        // Gravity force (constant)
        gravity: 80,
        // Maximum number of iterations to perform
        numIter: 10000,
        // Initial temperature (maximum node displacement)
        initialTemp: 100,
        // Cooling factor (how the temperature is reduced between consecutive iterations
        coolingFactor: 0.95,
        // Lower temperature threshold (below this point the layout will end)
        minTemp: 1.0
    };

Answer 1

您可以为某些关键 CoSE 布局设置指定函数而不是静态数字。这些函数采用边(或节点，在某些情况下)，因此您可以根据边属性定制布局。

所以你可以做这样的事情:

      idealEdgeLength: function (edge) {
        // Default is: 10
        // Instead, base it on "weight"
        return edge.data().weight * .5
      },

      edgeElasticity: function (edge) {
        // Default is: 100
        // Instead, base it on "weight"
        return edge.data().weight * 4
      },

您必须尝试与布局引擎一起使用的范围以及您期望作为输入的权重范围，但这种方法应该可以正常工作。