在 cytoscape.js 中通过 cy.add() 添加多条边后使用 mapData()

Question

我正在使用 cytoscape.js 将原始 txt 数据转换为 cytoscape.js 图表。为此，首先我制作图表： var cy = cytoscape({...}) 从 txt 文件中读取节点和边缘后没有任何 elements.Then，我将它们添加到节点中：

        cy.add({
            data: {id: keys[i]}
        }
    );

这是边缘：

        cy.add({
        data: {
            id: 'edge' + i,
            source: edges[i].source,
            target: edges[i].target,
            label: edges[i].weight
        }

    });

那我要申请'width': 'mapData(weight, 0, 100, 1, 6)'。我怎样才能做到这一点？我试过这些： 1) 在创建 cy 变量时在边选择器中使用 mapData()。（它不适用于添加的边和节点）

2) 在制作每条边后对每条边使用 mapData()： cy.$('#edge' + i).style('width','mapData(weight, 0, 100, 1, 6)');

3) 在创建所有节点和边后使用 mapData() ： cy.elements('edge').style('line-color','mapData(weight,1,6,blue,green)');

none 个有效！

Answer 1

可能是这样的：

var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    style: [
      {
        selector: 'node',
        style: {
          'label': 'data(name)',
          'width': 'mapData(weight, 0, 100, 1, 6)',
          'height': 'mapData(weight, 0, 100, 1, 6)',
        }
      }
    ]
  });

cy.add([
  { group: "nodes", data: { id: "n0", name: "node0", weight: "x"} },
  { group: "nodes", data: { id: "n1", name: "node1", weight: "y"} },
  { group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
]);

cy.ready(function ()  {            // Wait for nodes to be added
    cy.layout(                     // Call layout
        name: 'yourDecision'
    ).run();
});

我在初始化时定义了 cytoscape 实例，并在那里定义了 nodes/edges/... 的样式。

在 cytoscape.js 中通过 cy.add() 添加多条边后使用 mapData()

using mapData() after adding several edges by cy.add() in cytoscape.js

javascript

html

css

web

cytoscape.js