javascript - Cytoscape Cola.js 布局边长 = 文本语料库可视化

Question

我想用 data.json 中的权重设置边长。

就像 cytoscape-spread demo 中那样根据重量，边缘长度应更长。

"data" : {
    "id" : "1965",
    "source" : "108",
    "target" : "149",
    "shared_name" : "A (interacts with) B",
    "shared_interaction" : "interacts with",
    "name" : "A (interacts with) B",
    "interaction" : "interacts with",
    "SUID" : 1965,
    "weight" : 342,
    "selected" : false
  },
  "selected" : false

权重是 A 和 B 在我的文本语料库中出现在一起的频率。

我尝试了不同的布局，但现在不知道如何更改位置，即最大权重具有最短距离。

目前我尝试使用“cose”布局并设置 IdealEdgeLength: function( edge ){ return edge.data('weight'); }

  var options = {
  name: 'cose',

  // Called on `layoutready`
  ready: function(){},

  // Called on `layoutstop`
  stop: function(){},

  // Whether to animate while running the layout
  animate: true,


  // 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,

  // Randomize the initial positions of the nodes (true) or use existing positions (false)
  randomize: false,


  // Ideal edge (non nested) length
  idealEdgeLength: function( edge ){ return edge.data('weight'); },


};

cy.layout( options );

和 cola.js 边缘长度:

 name: 'cola',
            animate: true, // whether to show the layout as it's running
            refresh: 1, // number of ticks per frame; higher is faster but more jerky
            maxSimulationTime: 4000, // max length in ms to run the layout
            ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
            fit: true, // on every layout reposition of nodes, fit the viewport
            padding: 0, // padding around the simulation
            boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }

            // layout event callbacks
            ready: function(){}, // on layoutready
            stop: function(){}, // on layoutstop

            // positioning options
            randomize: false, // use random node positions at beginning of layout
            avoidOverlap: true, // if true, prevents overlap of node bounding boxes
            handleDisconnected: true, // if true, avoids disconnected components from overlapping
            nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
            flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
            alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }

            // different methods of specifying edge length
            // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
            edgeLength: function( edge ){var len = parseInt(edge.data('weight')); return len; }, // sets edge length directly in simulation
            edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
            edgeJaccardLength: undefined, // jaccard edge length in simulation

            // iterations of cola algorithm; uses default values on undefined
            unconstrIter: undefined, // unconstrained initial layout iterations
            userConstIter: undefined, // initial layout iterations with user-specified constraints
            allConstIter: undefined, // initial layout iterations with all constraints including non-overlap

            // infinite layout options
            infinite: false // overrides all other options for a forces-all-the-time mode

Answer 1

如果您希望在边权重较高的情况下将节点拉得更近，则边长需要与权重成反比，例如k/edge.data('weight') 对于一些常量k。您必须进行试验才能找到最适合您的数据的 k 值。

查看 Cola 演示源代码作为示例。它使用了这种精确的方法， slider 仅更改 k 值。

http://js.cytoscape.org/demos/2ebdc40f1c2540de6cf0/