🍣

react-force-graphを実装する際に詰まった点(TypeScript)

2022/11/08に公開

Neo4j

reactforcegraph

tech

動機

以下の記事を見て、
neo4jのサンプルDBから、ノード(点））とエッジ（辺）を表示する
記事中のコードはjavascriptなので、typescriptで書くと２つのエラーが表示する

ポイント① Nodeの型の拡張

Javascriptで書かれた参考のコードについて、
まず、nodeの型を拡張する。

type UserNode = NodeObject & {
  name?: string;
  imgUrl?: string;
  imgLoaded?: boolean;
  img?: HTMLImageElement;
};

ポイント② 辺をつなげるために

辺をlinksの配列に繋げる必要がある
私の場合はidをインクリメントでお茶を濁している


  const links: LinkObject[] = [];

  data.users.forEach((a) => {
    nodes.push({
      id: a?.id,
      name: a?.name,
      imgUrl: a?.profile_image_url,
    });
  });
  for (let i = 1; i < data.users.length; i++) {
    links.push({
      source: data.users[i - 1]?.id,
      target: data.users[i]?.id,
    });
  }

①、②の準備ができるとReactForceグラフでimageUrl他、
拡張したプロパティが利用できる


<NoSSRForceGraph
 nodeCanvasObject={(node: UserNode, ctx) => {
            const size = 12;
            const img = new Image();
            img.src = node.imgUrl;

イメージ

おまけ：
nodeCanvasObjectでグラフが作成できたら、CRUDをしたい。
以下のサンプルが参考になりそう

GitHubで編集を提案

動機

ポイント① Nodeの型の拡張

ポイント② 辺をつなげるために

Discussion