inet-henge にいくつか機能を足した

2020-02-25追記: SVG DOM が変更になったため、この記事のCSS ではスタイルが壊れるかもしれません。こちらも参考にしてください。

inet-henge というネットワーク図生成ライブラリーに

リンク太さを変えられる
リンク両端に加え，中央にラベルを置ける

地味な機能を足した．

github.com

inet-henge とは？

JSON データを元にネットワーク図を生成してくれる js ライブラリー．オートレイアウトする．

このようなコンセプトで作っている．

自動更新
- 入力少なく
- このくらいの外部データから生成したい．手動でレイアウトしたくない

{
  "nodes": [{ "name": "A" },{ "name": "B" }],
  "links": [{ "source": "A", "target": "B" }]
}

美しくなくていい．見てわかる範囲でやってくれれば OK
動かしたい
- 運用しながら / 設計しながら見る．デバイスやPOP 単位でノードを動かしたい
- レイアウトは保存しなくてもいい．再計算しても毎回結果が同じならOK
- ズームしたい．ある程度拡大したときのみ細かい情報を表示したい
- ブラウザでネットワーク図を表示したその画面で実現したい．ドキュメント内でもやりたい

デモ

https://youtu.be/3ZREgY2FGBkyoutu.be

Shownet 2016 Network

リンク太さを変える

こんな感じでメタデータを定義しておいて 👇

  "links": [
    { "source": "Node 1", "target": "Node 2", "meta": { "bandwidth": "1G" }},
    { "source": "Node 1", "target": "Node 3", "meta": { "bandwidth": "10G" }},
    { "source": "Node 2", "target": "Node 3", "meta": { "bandwidth": "100G" }}
  ]

こんな感じで描画する．👇 メタデータをもとにSVG のstroke-width を返す関数を渡す．

var diagram = new Diagram('#diagram', 'index.json');
diagram.link_width(function (link) {
  if (!link)
    return 1;  // px
  else if (link.bandwidth === '100G')
    return 10; // px
  else if (link.bandwidth === '10G')
    return 3;  // px
});
diagram.init('bandwidth');

何も返さない場合はSVG のデフォルト = 1px になる．

リンクにラベルを置く

こんな感じのリンク情報があったとすると 👇

  "links": [
    {
      "source": "Node 1", "target": "Node 2",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "interface A", "target": "interface B" }
      }
    }
  ]

こう書くことで 👇

new Diagram('#diagram', 'index.json').init('bandwidth', 'intf-name');

こうなる 👇

スタイルを変える

(追加機能ではないけれど) inet-henge はSVG を出力するので，CSS でスタイルを変えることができる．

.node rect {
  fill: #25271e !important;
  transform: scale(2) translate(-13px, -5px);
}

.node text {
  font-family: sans-serif;
  fill: #fff;
  font-size: 20px;
  transform: translate(0, 5px)
}

.link {
  stroke: #d0e799;
  stroke-opacity: 1;
}