react digraph使い方

JavaScript

React

TypeScript

Kazuki Moriyama (森山和樹)

公式

GraphViewコンポーネント

Props

GitHub - uber/react-digraph: A library for creating directed graph editors

nodeKey: 内部的にD3の操作に使用されているらしい。何故か”title”に設定しないとうまく動かない。
nodes: 表示するnodeのjsonの配列を渡す。jsonが満たすべき基準はGraphを表すjsonの形式を参照。
edges: 表示するedgeのjsonの配列を渡す。jsonが満たすべき基準はGraphを表すjsonの形式を参照。
graphConfig: 実際に表示されるノードをセットアップするobject
layoutEngineType: レンダリングエンジンの指定。ノードの表示位置や描画に関わる。

layoutEngineType

“None”, “VerticalTree", "SnapToGrid”から選択できる
None: エンジンは何もしない
SnapToGrid: 表示されたノードをドラッグするときにカクカクした挙動になる
VerticalTree: node dataに座標データを設定しなくても、勝手にツリー状に表示してくれる。逆に言えばこれ以外のエンジンを設定すると自分で座標を指定する必要がある。

Graphを表すjsonの形式

nodeとedgeを表現する通常のjson

GitHub - uber/react-digraph: A library for creating directed graph editors

node

サンプル

{
    id: 1,
    title: “Node A”,
    x: 258.3976135253906,
     y: 331.9783248901367,
     type: “empty”
}

id: エッジで連結するための識別子
title: グラフ中のノードに表示される文字
x, y: グラフ中のノードの座標
type: この文字列とnodeTypesに基づいてノードの形が決定される

edges

サンプル

{
    source: 1,
     target: 2,
     type: “emptyEdge”
}

source: エッジの始点となるノードのid
target: エッジの終点となるノードのid
type: この文字列とedgeTypesに基づいてノードの形が決定される

bwdl

react-digraph/bwdl-example-data.js at master · uber/react-digraph · GitHub

nodeとedgeのデータを用いたjsonはわかりやすい一方で、自分で作るには少し面倒
その際により扱いやすいデータ型としてbwdlという形式が用意されている
正規化されたentity stateのような形式になっている

サンプル

{
    States: {
      startNode: {
        Type: “Choice”,
        Choices: \[ { Next: “leftNode” }, { Next: “rightNode” } \]
      },
      leftNode: {
        Type: “noarmal",
        Next: “endNode"
      },
      rightNode: {
        Type: “noarmal",
        Next: “endNode"
      },
      endNode: {
        Type: “noarmal"
      }
    }
}

このjsonでひし形のグラフが描画される。

keyとvalueの説明

States: この中に実際のjsonを並べていく。例で言う「startNode」といった直下のkeyが通常のnode型jsonにおけるtitleに変換される。
title.Type: 通常のnode型jsonで言うtypeにあたる。次に続くNodeが１つ以下の場合は何を指定してもいいが、複数続く場合はChoiceを指定する必要がある。
title.Choices: 次に続く複数のノードを指定することができる。Nextにノードの名前を指定する。
title.Next: 次に続く１つのノードのtitle。

使用方法

GraphViewはpropsとして通常のnodesとedgesしか受け取れないためbwdl形式はそれらに変換する必要がある
その変換を担うtransformerというものが存在する
これを使用してnodesとedgesを取得する事ができる

graphConfig

サンプル

{
    empty: { // required to show empty nodes
      typeText: “None”,
      shapeId: “#empty”, // relates to the type property of a node
      shape: (
        <symbol viewBox=“0 0 100 100” id=“empty” key=“0”>
          <circle cx=“50” cy=“50” r=“45”></circle>
        </symbol>
      )
    },
    custom: { // required to show empty nodes
      typeText: “Custom”,
      shapeId: “#custom”, // relates to the type property of a node
      shape: (
        <symbol viewBox=“0 0 50 25” id=“custom” key=“0”>
          <ellipse cx="50" cy="25" rx="50" ry="25"></ellipse>
        </symbol>
      )
    }
  }

topのkey: なんでもいい？要調査
type.typeText: グラフ中のノードにnode dataのtitleと合わせて一緒に表示される
type.shapeId: node dataの中のtypeでこれを指定する
type.shape: 実際に表示されるノードのsvg要素

ユースケース

ノードに好きな文字を出力する

react-digraph/node-text.js at 5bc40de33d572af87dc26ac47c0bb809ae99b633 · uber/react-digraph · GitHub
GraphViewのrenderNodeTextにsvg要素を渡してあげるとそれがrenderされるので、これを使用して好きな文字列を表示することができる