pexels-photo-3714900.jpeg

react digraph使い方

 
0
このエントリーをはてなブックマークに追加
Kazuki Moriyama
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が1つ以下の場合は何を指定してもいいが、複数続く場合はChoiceを指定する必要がある。
  • title.Choices: 次に続く複数のノードを指定することができる。Nextにノードの名前を指定する。
  • title.Next: 次に続く1つのノードのtitle。

使用方法

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されるので、これを使用して好きな文字列を表示することができる

グラフの操作

  • ノードはshift + clickで新規作成
  • エッジはshift + drag and dropで新規作成
info-outline

お知らせ

K.DEVは株式会社KDOTにより運営されています。記事の内容や会社でのITに関わる一般的なご相談に専門の社員がお答えしております。ぜひお気軽にご連絡ください。