javascript - 细胞景观 : Sankey-like edge size

Question

有没有办法在 cytoscape.js 中创建类似于 Sankey 的边宽图？明确地说，我不想在 cytoscape.js 中创建桑基图。我想要的是创建边，这些边的总大小与它们所源自的节点的大小相同。

修改边缘宽度的一种方法是通过强度属性，但我没有找到一种方法来指定与原始节点大小相关的此属性。

提前致谢

安迪

Answer 1

您可以使用数据映射器并在初始化时为每个元素设置 data.width:

var cy = cytoscape({
  container: $('.cytoscape-container').get(0),
  ...,
  style: {
    {
      selector: 'edge',
      style: { 
        'width': 'data(size)'
      }
    }

    {
      selector: 'node',
      style: { 
        'width': 'data(size)',
        'height': 'data(size)'
      }
    }
  }
});

或者你可以只使用类:

var cy = cytoscape({
  container: $('.cytoscape-container').get(0),
  ...,
  style: {
    {
      selector: 'edge.foo',
      style: { 
        'width': 20
      }
    }

    {
      selector: 'node.foo',
      style: { 
        'width': 20,
        'height': 20
      }
    }
  }
});