@yanqirenshi/pixi.dfd

DFD (Gane-Sarson 風) を PixiJS (WebGL) で描画するレンダラです。 入力は @yanqirenshi/d3.dfd と同じ { nodes, flows } を受け付けます。

SVG 版 (d3.dfd) の要素数が増えて操作が重くなるケース向けの実験的な代替実装です。

使い方

import { PixiDfd } from '@yanqirenshi/pixi.dfd';

<PixiDfd data={dfdData} height={560} onNodeClick={(core, node) => { ... }} />

• パン: 背景ドラッグ / ズーム: ホイール / ノード移動: ドラッグ
• flows[].from/to は { node: <id>, side: 'top|right|bottom|left' } または { x, y }

構成

• data/DfdModel.ts — 入力の正規化(データクラス)
• PixiDfd.tsx — PixiJS レンダラ(描画クラス相当)