@yanqirenshi/d3.deployment

デプロイメント図（ノード・エッジ・ポート）を SVG で描画する React コンポーネントです。

• ノードは children で入れ子にできます。宣言サイズより子が大きい場合は親が自動で広がります。
• ノードはドラッグで移動でき、親を動かすとサブツリーごと追従します。
• エッジの取り付け位置はポートの角度で指定します（0=真下・時計回り。90=左 / 180=真上 / 270=右）。
• このライブラリは描画のみを行います。 クリックはコールバックで通知するだけで、 編集 UI は利用側が用意します（ショーケースではインスペクタ @yanqirenshi/colonoscope を繋いでいます）。

インストール

npm install @yanqirenshi/d3.deployment

React 18 / 19 に対応しています（peerDependencies）。

使い方

描画の管理オブジェクト Rectum を作って React コンポーネント D3Deployment に渡し、 data() でデータを流し込みます。

import React from 'react';
import D3Deployment, { Rectum } from '@yanqirenshi/d3.deployment';

export default function Graph({ data }) {
  const [rectum, setRectum] = React.useState(null);

  React.useEffect(() => {
    const r = new Rectum({
      transform: { k: 0.6, x: 120, y: 120 },   // 初期のズーム / パン
      callbacks: {
        // 描画は行わず通知のみ。core は入力データそのもの
        node: { click: (core, node) => {} },
        edge: { click: (core, edge) => {} },
      },
    });
    r.data(data);
    setRectum(r);
  }, [data]);

  if (!rectum) return null;

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <D3Deployment rectum={rectum} />
    </div>
  );
}

描画後にポートの角度を変える

rectum.setEdgePorts(edge_id, { from: 0, to: 180 });   // 省略した側は変更しない

入力データ側（_core）の角度を書き換えてから再フィットするので、 以後の再描画やコンポーネントの remount でも維持されます。

入力データ

{ nodes, edges } の連想配列です。

{
  nodes: [
    {
      type: 'NODE', id: 1,
      label: { text: 'NODE 01', position: { x: 20, y: 20 }, font: { size: 16, color: '#333333' } },
      description: 'ホバー時のツールチップに出る（任意）',
      link: { url: 'https://example.com/' },   // 任意。ボックス左下に表示
      padding: 40,                             // 任意。数値・全辺共通
      size: { w: 150, h: 150 }, position: { x: 0, y: 0 },
      children: [ /* 入れ子のノード */ ],
    },
  ],
  edges: [
    { id: 100, from: { id: 1, position: 0 }, to: { id: 2, position: 180 } },
  ],
}

edges[].from.id / to.id は nodes[].id を参照します（入れ子の内側のノードも指定できます）。

フィールドの詳細はショーケースの d3.deployment のページ（「データ」タブ）を参照してください。 サンプルの実データは showcase/src/demos/data/deployment-sample.js です。

開発

npm run transpile -w @yanqirenshi/d3.deployment   # src -> dist（dist はコミット対象）
npm test -w @yanqirenshi/d3.deployment            # jest

Author

Satoshi Iwasaki ([email protected])

Copyright

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

License

Licensed under the MIT License.