如何在localhost运行React D3 Tree组件并构建可运行树状图应用

别担心，刚接触这类React组件时踩坑很正常，咱们一步步来，把Demo级的树状图跑起来，再搞定自定义数据导入：

第一步：先确保有正确的React项目结构 #

新手最容易犯的错就是直接在空文件夹里装包，却没初始化标准的React项目。咱们用官方工具快速搭建基础框架：

1. 打开Windows命令行，执行：

   npx create-react-app d3-tree-demo
   

2. 进入项目目录：

   cd d3-tree-demo
   

第二步：安装react-d3-tree组件 #

在项目目录里执行安装命令：

npm install react-d3-tree

第三步：检查启动脚本（解决npm start无效问题） #

create-react-app默认会在package.json里配置好启动脚本，但如果你之前手动修改过文件，可能不小心删掉了。打开项目根目录的package.json，找到scripts部分，确保它长这样：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

如果没有这个部分，要么重新执行第一步初始化项目，要么手动把这段代码加进去，然后执行npm install react-scripts补全依赖。

第四步：编写树状图核心代码 #

打开src/App.js，把里面的默认代码替换成下面的内容：

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

// 方式1：直接在代码里写树数据
// const treeData = [
//   {
//     name: '根节点',
//     children: [
//       { name: '子节点1' },
//       { name: '子节点2', children: [{ name: '孙节点' }] },
//     ],
//   },
// ];

// 方式2：导入自定义JSON数据（推荐，更易维护）
import treeData from './data/treeData.json';

function App() {
  // 给树状图设置全屏容器，不然可能显示不出来
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Tree data={treeData} />
    </div>
  );
}

export default App;

第五步：导入自定义JSON数据 #

1. 在src文件夹下新建一个data子文件夹
2. 在data里创建treeData.json文件，写入符合格式的树数据（每个节点要有name，可选children数组）：

[
  {
    "name": "我的自定义根节点",
    "children": [
      {
        "name": "业务分支A",
        "children": [
          {"name": "A-子项1"},
          {"name": "A-子项2"}
        ]
      },
      {
        "name": "业务分支B",
        "children": [
          {"name": "B-子项1"},
          {"name": "B-子项2"},
          {"name": "B-子项3"}
        ]
      }
    ]
  }
]

3. 回到App.js，把方式1的代码注释掉，打开方式2的导入代码即可。

第六步：启动项目 #

在命令行执行：

npm start

等几秒后，浏览器会自动打开localhost:3000，你就能看到和Demo类似的树状图了！

常见问题排查 #

• 树状图显示不出来：检查容器的宽高是否设置（上面代码里的width: '100vw', height: '100vh'就是干这个的），D3组件需要足够的渲染空间
• npm start报错：确保已经安装了react-scripts，执行npm install react-scripts补全
• JSON导入报错：检查JSON文件的语法，比如逗号、括号是否配对，有没有多余的符号

内容的提问来源于stack exchange，提问作者Stephanie