html 在Cytoscape中创建网络

1sbrub3j  于 2022-11-20  发布在  其他
关注(0)|答案(1)|浏览(146)

bounty将在6天后过期。回答此问题可获得+50的声望奖励。Natasha希望吸引更多人关注此问题:我已经在回答中提到的变化张贴工作,但我不能查看图表。请检查我的编辑。

我尝试使用cytoscape js创建并可视化图表
我有两个文件:
输入文件
index.html包含以下内容

<head>
    <title>Tutorial 1: Getting Started</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
</head>
<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>
<body>
    <div id="cy"></div>
    <script>
      $.getJSON("input.js", function (data) {
      var cy = cytoscape({
        elements: data,
        container: document.getElementById('cy'),
        style: [
    {
        selector: 'node',
        style: {
            shape: 'hexagon',
            'background-color': 'red',
            label: 'data(id)'
        }
    }],
    layout: {
    name: 'grid'
},
});
      });
    </script>
</body>

input.js包括以下内容

[
  // nodes
  { data: { id: 'a' } },
  { data: { id: 'b' } },
  { data: { id: 'c' } },
  { data: { id: 'd' } },
  { data: { id: 'e' } },
  { data: { id: 'f' } },
  // edges
  {
    data: {
      id: 'ab',
      source: 'a',
      target: 'b'
    }
  },
  {
    data: {
      id: 'cd',
      source: 'c',
      target: 'd'
    }
  },
  {
    data: {
      id: 'ef',
      source: 'e',
      target: 'f'
    }
  },
  {
    data: {
      id: 'ac',
      source: 'a',
      target: 'd'
    }
  },
  {
    data: {
      id: 'be',
      source: 'b',
      target: 'e'
    }
  }
]

但是当我在浏览器中打开index.html时,只看到一个空文件。
谁能帮我一下吗?
编辑:我已经完成了下面答案中提到的变更https://github.com/DeepaMahm/misc/blob/master/index.htmlhttps://github.com/DeepaMahm/misc/blob/master/input.js
但我仍然无法通过打开index.html查看该图。

afdcj2ne

afdcj2ne1#

实时代码,原始代码已修改和更正。您的data/结构不符合所需的规格。一旦更正,输出将显示。
第一个

相关问题