D3.Network

Usage

See src/index.html

Data Structure

データを以下のフォーマットに変換して流し込む必要があります。

Node

Envelope

{
  ht: { /* key: _id, value: Object */ },
  list: [ /* Object ... */ ]
}

Object

{
    x: 0,
    y: 0,
    label: {
        text: 'XYZ',
        font: {
            size: 12
        }
    },
    circle: {
        r: 33,
        fill: '#eeeeee',
        stroke: {
            color: '#888888',
            width: 1
        }
    },
    _id: 1,
    _class: 'XXX'
    _core: { /* 元となるデータ */ }
}

Edge

Envelope

{
  ht: { /* key: _id, value: Object */ },
  list: [ /* Object ... */ ]
}

Object

{
   source: 1,
   target: 2
    _core: { /* 元となるデータ */ }
}

Installation

Force simulation options

Rectum の simulation パラメータでフォースレイアウトを調整できます。 未指定の項目は既定値のままです。

new Rectum({
  simulation: {
    link:    { distance: 150, strength: 0.5 }, // 既定: d3-force の既定値
    charge:  { strength: -200 },               // 既定: d3-force の既定値(-30)
    collide: { radius: 60 },                   // 既定: 111
    alpha:   { min: 0.001, target: 0.002 },    // 既定値
  },
});

// 実行中に変更する(指定した項目だけ上書きされ、再加熱されます)
rectum.simulation.configure({ charge: { strength: -400 } });

link.distance / link.strength / charge.strength / collide.radius は、数値の代わりに関数を渡すと、エッジ毎・ノード毎に値を変えられます。 関数の引数は、描画用に変換された後のノード/エッジです。 元のデータは _core から参照できます。

new Rectum({
  simulation: {
    // ノード: circle.r, move, label, _core など
    collide: { radius: (node) => node.circle.r + 20 },
    charge:  { strength: (node) => node.move === 'freeze' ? 0 : -200 },
    // エッジ: source, target(ノードのオブジェクト), line, _core など
    link:    { distance: (edge) => edge._core.length || 150 },
  },
});

Redraw (2回目以降の data()) (v0.7.0+)

同じ Rectum に対して data() を何度呼んでも、カメラ(パン/ズーム)を保ったまま差分更新されます。

• id が一致した既存の辺は残り、新しいデータに無くなった辺だけが消えます。

• 空配列と未指定は区別されます（v0.7.1+）。

  | 入力 | 挙動 | |---|---| | [] | ゼロ件として扱い、そのレイヤの要素を全部消します | | キー省略 / undefined / null | 触りません（前回の描画をそのまま保ちます） |

  data({ edges: [...] }) のように片方のキーだけを渡すと、もう一方（この例ではノード）は そのまま残ります。全部消したいときは明示的に [] を渡してください。

  なお辺は必ず nodes に存在するノードを参照してください。 { nodes: [], edges: [...] } のようにノードを空にして辺を残すと、d3-force が node not found: <id> を投げます（存在しないノードを参照する辺は、空配列に限らず 以前から同じエラーになります）。 ノードを消すときは辺も一緒に [] にしてください。

• 再描画のたびにシミュレーションを弱く再加熱するため、新しく作った辺にも線の形(d 属性)が入ります。 d は tick の中でしか設定されないため、この再加熱が無いとシミュレーションが止まったあとの再描画で線が描かれません。

• 初回の描画では再加熱しません(初期レイアウトの展開を弱めないため)。

ノードをドラッグして離したあともシミュレーションは止まりません (alphaTarget は 0 ではなく設定値 — 既定 0.002・alphaMin 0.001 より大きい値 — に戻ります)。

任意のタイミングで弱く再開したい場合は reheat() を使えます。

rectum.simulation.reheat();      // alpha 0.1 で再開(既定)
rectum.simulation.reheat(0.3);   // alpha を指定する

configure() も再開しますが、そちらは常に alpha(1) なので全ノードが大きく動きます。 設定変更を伴わない再開には reheat() を使ってください。

Dependencies

• D3.js

Author

Satoshi Iwasaki ([email protected])

Copyright

Copyright (c) 2018-2026 Satoshi Iwasaki ([email protected])

License

Licensed under the MIT License.