cytoscape.jsでネットワーク図

長い事てきとうなライブラリがないか探していたのですが、cytoscape.jsが良さそうなので、おうちのネットワーク図を書いてみました。

![ouchi_network(5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/b9ea4ef5-553b-3149-6fc0-131f94c20851.png)

細い線は100Mで太い線は1Gです。

```html:index.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="cytoscape.min.js"></script>
    <link rel="stylesheet" type="text/css" href="custom.css">
  </head>
  <body>
    <div id="cy"></div>
    <input type="button" value="Save as PNG" id="download"/>
    <script src="custom.js"></script>

  </body>
</html>
```

```css:custom.css
#cy {
  width: 100%;
  height: 90%;
  display: block;
}
```

```javascript:custom.js
var cy = cytoscape({
  container: $('#cy'),
  elements: [
    {
      data: { id: 'modem' }
    },
    {
      data: { id: 'fw' }
    },
    {
      data: { id: 'nas' }
    },
    {
      data: { id: 'db120' }
    },
    {
      data: { id: 'c1k' }
    },
    {
      data: { id: 'mt' }
    },
    {
      data: { id: 'gps1' }
    },
    {
      data: { id: 'gps2' }
    },
    {
      data: { id: 'jjy1' }
    },
    {
      data: { id: 'jjy2' }
    },
    {
      data: { id: 'macmini' }
    },
    {
      data: { id: 'oumon' }
    },
    {
      data: { id: 'wifi' }
    },
    {
      data: { id: 'amd64' }
    },
    {
      data: { id: 'ms' }
    },
    {
      data: { id: 'ryzen' }
    },
    {
      data: { id: 'e0', source: 'fw', target: 'modem', 'speed': 5 }
    },
    {
      data: { id: 'e1', source: 'fw', target: 'nas', 'speed': 5 }
    },
    {
      data: { id: 'e2', source: 'nas', target: 'db120', 'speed': 5 }
    },
    {
      data: { id: 'e3', source: 'nas', target: 'mt', 'speed': 2 }
    },
    {
      data: { id: 'e4', source: 'mt', target: 'gps1', 'speed': 2 }
    },
    {
      data: { id: 'e5', source: 'mt', target: 'gps2', 'speed': 2 }
    },
    {
      data: { id: 'e6', source: 'mt', target: 'jjy1', 'speed': 2 }
    },
    {
      data: { id: 'e7', source: 'mt', target: 'jjy2', 'speed': 2 }
    },
    {
      data: { id: 'e8', source: 'macmini', target: 'db120', 'speed': 5 }
    },
    {
      data: { id: 'e9', source: 'oumon', target: 'db120', 'speed': 2 }
    },
    {
      data: { id: 'e10', source: 'wifi', target: 'nas', 'speed': 2 }
    },
    {
      data: { id: 'e11', source: 'amd64', target: 'fw', 'speed': 5 }
    },
    {
      data: { id: 'e12', source: 'ms', target: 'fw', 'speed': 5 }
    },
    {
      data: { id: 'e13', source: 'ryzen', target: 'fw', 'speed': 5 }
    },
    {
      data: { id: 'e14', source: 'c1k', target: 'db120', 'speed': 5 }
    },
  ],
  style: [
    {
      selector: 'node',
    style: {
//      'shape': 'rectangle',
'text-valign': 'center',
'color': 'white', 'text-outline-width': 2,
//, 'text-outline-color': 'green', 'background-color': 'green' 'color': 'white', 'text-outline-width': 2, 'text-outline-color': 'green', 'background-color': 'green',
      'label': 'data(id)'
    }
},
/*
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
*/
    {
      selector: 'edge',
      style: {
        'width': 'data(speed)',
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout: {
    name: 'cose',
    animate: false
  }
});

$('#download').on("click", function(ev) {
        var a = document.createElement('a');
        //var blob = new Blob([content], {'type': contentType});
        var option = {
            output: "blob"
        };
        var blob = new Blob([
            window.cy.png(option)
        ], {'type': 'application/octet-stream'});
        a.href = window.URL.createObjectURL(blob);
        a.download = "ouchi_network.png";
        a.click();
    });
```