cytoscape.js制作数据展示网络图

「爱情、让人受尽委屈。」 2021-07-26 22:50 820阅读 0赞

# **开始** #

### 直接上效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70][]

###  不墨迹直接上代码html ###

<!DOCTYPE html>
    
    <html>
    <head>
    <link href="style.css" rel="stylesheet" />
    <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">
    <title>Animated BFS</title>
    <script src="cytoscape.min.js"></script>
    </head>
    <body>
    <div id="cy"></div>
    <script src="code.js"></script>
    </body>
    </html>

### js:  ###

//造数据
    var list1 = [
      { data: { id: 'a' ,name: 'Tom CruiseTom CruiseTom Cruise', label: 'Person'} },
    ]
    var list2 = [
      { data: { id: 'aa', weight: 1, source: 'a', target: 'a1', relationship: '连长'} },
    ]
    for (var i = 1 ;i<10; i++) {
      list1.push(
          { data: { id: `a${i}` ,title: `Tom${i}`, label: `Cruise${i}`} },
      )
      if (i<=8) {
        list2.push(
            { data: { id: `a${i}a${i}`, weight: 1, source: `a${i}`, target: `a${i+1}`, relationship: `管家${i}`} },
        )
      }
    }
      var cy = cytoscape({
          container: document.getElementById('cy'),
    
          boxSelectionEnabled: false,
          autounselectify: true,
    
          style: cytoscape.stylesheet()
              .selector('node[label = "Person"]') // 选择器   给Person设置样式
              .style({
                'background-color': '#000000',
                'width':'70',
                'height':'70',
                'content': 'data(name)',
                'font-family':'微软雅黑',
                'font-size':14,
                'color':'#ffffff',
                'text-valign':'center',
                'text-wrap':'wrap',
                'text-max-width':60,
                'text-halign':'center',
                'overlay-color':'#fff',
                'overlay-opacity':0,
                'background-opacity':1,
                'text-background-color':'#000',
              })
              .selector('node[label != "Person"]')
              .style({
                'background-color': '#61bffc',
                'content': 'data(title)',
                'font-family':'微软雅黑',
                'font-size':14,
                'width':'50',
                'height':'50',
                'color':'#ffffff',
                'text-valign':'center',
                'text-wrap':'wrap',
                'text-max-width':60,
                'text-halign':'center',
                'overlay-color':'#fff',
                'overlay-opacity':0,
                'background-opacity':1,
                'text-background-color':'#000',
              })
              .selector('edge')            // 连线样式
              .style({
                'curve-style': 'bezier',
                'target-arrow-shape': 'triangle',
                'width': 4,
                'line-color': '#ddd',
                'target-arrow-color': '#ddd',
                'content': 'data(relationship)'
              }),
          // .selector('.highlighted')
          //   .style({
          //     'background-color': '#61bffc',
          //     'line-color': '#61bffc',
          //     'target-arrow-color': '#61bffc',
          //     'transition-property': 'background-color, line-color, target-arrow-color',
          //     'transition-duration': '0.5s'
          //   }),
    
          elements: {  // 数据渲染
            nodes: list1 ,
            edges: list2
          },
    
          layout: {
            name: 'circle', // circle  random breadthfirst preset  // 4种展示方式  还有自定义的 没弄
            directed: true,
            roots: '#a',
            padding: 10,
          },
          zoom: 1,
          minZoom: 0.5, //最小值
          maxZoom: 2,//最大值
      })

有的人竟然把这个js库变成收费版哎....

cytoscape.min.js这个库地址:[https://github.com/977574992/cytoscape.min.js.git][https_github.com_977574992_cytoscape.min.js.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70]: /images/20210726/dbf738f6c4fc456cb2ad7e0ac26c0c40.png
[https_github.com_977574992_cytoscape.min.js.git]: https://github.com/977574992/cytoscape.min.js.git