vis-network - くたくたじゅうよん

vis-network

vis.jsのネットワークグラフを描画するmodule

/icons/github.iconvisjs/vis-network

docs: vis.js - Network documentation.

Example

unpkg.comで公開されているesmファイルは使えない

module解決方法がnode準拠

esm.shからも使えない

vis-util/esnext.d.tsをesm.shで解決できないみたい？

結局の所、DenoからはJSとして使うしかなさそう

型を使えないのは結構痛いな

https://visjs.github.io/vis-network/examples/network/basic_usage/standalone.html を流用

code:run.sh

curl -o index.html https://scrapbox.io/api/code/takker/vis-network/index.html

curl -o index.js https://scrapbox.io/api/code/takker/vis-network/index.js

deno run --allow-net=0.0.0.0:8899 --allow-read=./ https://scrapbox.io/api/code/takker/CLIからHTMLファイルをlocalhostでweb_broserに表示する/script.ts

code:index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"></meta>

<title>My test page</title>

<script type="module" src="./index.js"></script>

<style>

html, body, #mynetwork {

height: 100%;

}

</style>

</head>

<body>

<div id="mynetwork"></div>

</body>

</html>

code:index.js

import { DataSet, Network } from "https://unpkg.com/vis-network@9.0.5/standalone/esm/vis-network.min.js";

// CSS will be automatically injected into the page.

// create an array with nodes

const nodes = new DataSet([

{ id: 1, label: "Node 1" },

{ id: 2, label: "Node 2" },

{ id: 3, label: "Node 3" },

{ id: 4, label: "Node 4" },

{ id: 5, label: "Node 5" }

]);

// create an array with edges

const edges = new DataSet([

{ from: 1, to: 3 },

{ from: 1, to: 2 },

{ from: 2, to: 4 },

{ from: 2, to: 5 },

{ from: 3, to: 3 }

]);

// create a network

const container = document.getElementById("mynetwork");

const data = {

nodes: nodes,

edges: edges

};

const options = {};

const network = new Network(container, data, options);

大量のNodeを扱う時

Tips on working with large number of nodes · Issue #248 · visjs/vis-network

javascript - How to limit zooming of a vis.js network? - Stack Overflow

javascript - vis.js slow with many nodes / edges - Stack Overflow

References

Vis Networkで階層グラフを可視化する | フューチャー技術ブログ

使い方がわかりやすい

#2021-08-10 10:33:09