@yanqirenshi/d3.unchi

ポンチ絵（なんでもありの概念図）を SVG で描画する React コンポーネントです。

@yanqirenshi/d3.deployment をベースにしており、ノード（入れ子可）・エッジ・ポートで構成します。 入力データの形も d3.deployment と同じです。

• ノードは枝（BRANCH。子を持つ入れ物）と葉（REAF。末端のカード）に分かれ、既定の見た目が違います。 _class を省略すると children の有無から導出されます。
• 葉には画像ノード（type: 'IMAGE'）、枝にはアイコン付きの枝（type: 'ICON'。AWS 構成図のグループ枠風）と 円筒＝データストア形の枝（type: 'CYLINDER'）があります。
• 円筒は size の箱に内接し、子は上蓋とラベルのぶん自動で下がります（底のふくらみは padding に収まるので、 padding を省略しても子が弧に重なりません）。ラベルは label.text に文字列配列を渡すと複数行になります。
• ノードはドラッグで移動でき、親を動かすとサブツリーごと追従します。
• エッジは両端のマーカー（矢印など8種）とラベル（リンク可）を指定できます。
• このライブラリは描画のみを行います。 クリックはコールバックで通知するだけで、 編集 UI は利用側が用意します（ショーケースではインスペクタ @yanqirenshi/colonoscope を繋いでいます）。

インストール

npm install @yanqirenshi/d3.unchi

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

使い方

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

import React from 'react';
import D3Unchi, { Rectum } from '@yanqirenshi/d3.unchi';

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%' }}>
      <D3Unchi rectum={rectum} />
    </div>
  );
}

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

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

入力データ

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

{
  nodes: [
    {
      type: 'NODE', id: 1, _class: 'BRANCH',
      label: { text: 'サービス', position: { x: 20, y: 24 }, font: { size: 16, color: '#3b4a63' } },
      description: 'ホバー時のツールチップに出る（任意）',
      link: { url: 'https://example.com/' },   // 任意
      padding: 40,                             // 任意。数値・全辺共通
      size: { w: 150, h: 150 }, position: { x: 0, y: 0 },
      children: [
        { type: 'NODE', id: 3, _class: 'REAF',
          label: { text: 'Web' }, size: { w: 140, h: 80 }, position: { x: 0, y: 20 } },
      ],
    },
  ],
  edges: [
    { id: 100, from: { id: 1, position: 90 }, to: { id: 3, position: 270 },
      from_marker: 'circle-open', to_marker: 'triangle',   // 既定は to のみ arrow
      stroke: { color: '#d9a400', width: 2 },
      label: { text: '利用', font: { size: 12 }, link: 'https://example.com/' } },
  ],
}

エッジのポート角度（position）は 0=真下・時計回りです（90=左 / 180=真上 / 270=右）。 マーカーの種類は MARKER_TYPES で参照できます。

import { MARKER_TYPES } from '@yanqirenshi/d3.unchi';
// ['none', 'arrow', 'triangle', 'triangle-open', 'circle', 'circle-open', 'diamond', 'diamond-open']

フィールドの詳細は src/index.d.ts が正です（実装は Babel なので、この手書きの宣言が公開 API の正になります）。 ショーケースの d3.unchi のページ（「データ」タブ）にも項目ごとに載せています。 サンプルの実データは showcase/src/demos/data/unchi-sample.js です。

開発

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

Author

Satoshi Iwasaki ([email protected])

Copyright

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

License

Licensed under the MIT License.