前提

Reactでツリー型のデータを可視化するには、react-d3-treeというライブラリを使用することができます。ただし、このライブラリはd3.jsのバージョン4に依存しているため、最新のd3.jsバージョンをインストールしている場合は、エラーが発生することがあります。

手順

以下は、react-d3-treeを使用するために必要な手順です。

react-d3-treeとd3.js v4をインストールする。

yarn add react-d3-tree d3@4 @types/d3

react-d3-treeをコンポーネントでインポートする。

import React from 'react'
import Tree from 'react-d3-tree'

const MindMapComponent: React.FC = () => {
  const treeData = {
    name: 'Root',
    children: [
      {
        name: 'Node 1',
        children: [
          {
            name: 'Node 1.1',
          },
          {
            name: 'Node 1.2',
          },
        ],
      },
      {
        name: 'Node 2',
      },
    ],
  }

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <Tree
        data={treeData}
        nodeSize={{ x: 140, y: 30 }}
        transitionDuration={0}
        translate={{ x: 300, y: 100 }}
        orientation="vertical"
        separation={{ siblings: 1.2, nonSiblings: 1.2 }}
      />
    </div>
  )
}

export default MindMapComponent

ツリーデータをdataという変数に格納し、コンポーネントのdataプロパティに渡します。

まとめ

以上の手順に従ってreact-d3-treeを使用することができます。ただし、注意点として、d3.js v4はReactとの互換性がある程度問題になる場合があるため、使用する前に十分なテストを行うことをお勧めします。