如何在 Cytoscape.js 中制作加权图？

Question

Im new to cytoscape, I have read the docs but can't find something that helps.我是 cytoscape 的新手，我已经阅读了文档，但找不到有用的东西。 Is there a way to make something like this (a weighted graph) in Cytoscape.js?:有没有办法在 Cytoscape.js 中制作这样的东西（加权图）？：

I just need to know how to display the weight of the edge.我只需要知道如何显示边缘的重量。

So far I have this:到目前为止，我有这个：

elements: [
  // list of graph elements to start with
  {
    // node a
    data: { id: "a" },
  },
  {
    // node b
    data: { id: "b" },
  },
  {
    // edge ab
    data: { id: "ab", weight: 3, source: "a", target: "b" },
  },
],

But adding a weight to the edge doesn't display the weight in the graph:但是向边添加权重不会在图中显示权重：

Answer 1

You can use 'label': 'data(weight)' in your css for the edge to show the weight property as a label of the edge.您可以在边缘的 css 中使用'label': 'data(weight)'以将 weight 属性显示为边缘的标签。 You can also adjust styling of this label as detailed here .您还可以按照此处的详细说明调整此标签的样式。 I applied two of them (text-margin-y and text-orientation) in the below sample.我在下面的示例中应用了其中的两个（text-margin-y 和 text-orientation）。

 var cy = window.cy = cytoscape({ container: document.getElementById('cy'), layout: {name: 'grid', rows: 2}, style: [{ selector: 'node', css: { 'content': 'data(id)', 'text-valign': 'center', 'text-halign': 'center' } }, { selector: 'edge', css: { 'label': 'data(weight)', 'text-margin-y': 15, 'text-rotation': 'autorotate' } } ], elements: { nodes: [{ data: { id: 'n0' } }, { data: { id: 'n1' } }, { data: { id: 'n2' } }, { data: { id: 'n3' } } ], edges: [{ data: { id: 'n0n1', source: 'n0', target: 'n1', weight: 3 } }, { data: { id: 'n1n2', source: 'n1', target: 'n2', weight: 5 } }, { data: { id: 'n2n3', source: 'n2', target: 'n3', weight: 7 } } ] } });

 body { font: 14px helvetica neue, helvetica, arial, sans-serif; } #cy { height: 95%; width: 95%; left: 0; top: 0; position: absolute; }

 <html> <head> <meta charset=utf-8 /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> <script src="https://unpkg.com/cytoscape@3.10.0/dist/cytoscape.min.js"> </script> </head> <body> <div id="cy"></div> </body> </html>

如何在 Cytoscape.js 中制作加权图？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-24 06:00:53

如何在 Cytoscape.js 中制作加权图？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-24 06:00:53

解决方案1
1 已采纳 2020-09-24 06:00:53