React-d3-tree 缩放和拖动在 Next.js 13 上不起作用

Question

我正在开发一个 Next.js 13 项目，使用react-d3-tree 库来渲染树结构。我已将缩放和拖动属性添加到树组件中，但遇到了这些功能在客户端无法一致工作的问题。最初，它可以工作一次，但现在根本不起作用。

这是我的 roadmap.tsx 文件：

"use client"

import Tree from 'react-d3-tree';
import { Node } from '../utils/d3/interfaces/Node';

// ... (other code)

export default function Roadmap({ data }: RoadmapProps) {
    // ... (other code)

    return (
        <section>
            <div id="treeWrapper" style={{ width: '80vw', height: '100vh', overflow: 'hidden' }}>
                <Tree
                    data={data}
                    zoomable={true}
                    scaleExtent={{ max: 1, min: 0.1 }}
                    draggable={true}
                    translate={{ x: 600, y: 100 }}
                    orientation="vertical"
                    pathFunc="step"
                />
            </div>
        </section>
    )
}

这是我的 page.tsx 文件：

// ... (other code)

export default async function Home() {
    // ... (other code)

    return (
        <main className="max-w-7xl mx-auto lg:px-16 px-6 bg-slate-400">
            <Roadmap data={nodes} />
        </main>
    )
}

这是示例数据：

[
  {
    "name": "Checkpoint 2",
    "attribute": {
      "id": "18f7db92-b5cf-46b5-9641-08ceac16ca6e"
    },
    "children": [
      {
        "name": "Checkpoint 1",
        "attribute": {
          "id": "658d0c4b-2726-47a6-8053-b2ffd8eb2502"
        },
        "children": [
          {
            "name": "Checkpoint 6",
            "attribute": {
              "id": "0d59cdcd-e159-4f52-a3e9-1ddaa32fff0f"
            },
            "children": []
          },
          {
            "name": "Checkpoint 7",
            "attribute": {
              "id": "a61d8a27-1228-4eb1-94ea-5edc6678c1b4"
            },
            "children": []
          }
        ]
      },
      {
        "name": "Checkpoint 3",
        "attribute": {
          "id": "be69ab2b-11c6-423e-9fe1-b9c46c4c37f4"
        },
        "children": [
          {
            "name": "Checkpoint 8",
            "attribute": {
              "id": "59078d99-512c-4413-96bf-0e237fbe4dca"
            },
            "children": []
          },
          {
            "name": "Checkpoint 9",
            "attribute": {
              "id": "f7dee6d8-e56a-4bc5-9c25-e5eb098aa53f"
            },
            "children": []
          }
        ]
      },
      {
        "name": "Checkpoint 4",
        "attribute": {
          "id": "0b24d129-c75c-4d07-b350-6ead198e6237"
        },
        "children": []
      },
      {
        "name": "Checkpoint 5",
        "attribute": {
          "id": "342c95c1-256f-488a-94a7-e4f3a56ec2cf"
        },
        "children": []
      }
    ]
  }
]

我正在使用 Next.js 13 和react-d3-tree 库。我正在寻求有关如何排查和解决此问题的建议，以便缩放和拖动功能在客户端上一致地工作。任何见解或建议将不胜感激。

Answer 1

与ssr问题有关，确保在客户端渲染。例如：

const [showTree, setShowTree] = useState(false);
useEffect(() => {setShowTree(true)}, [])
if (!showTree) {
    return <></>
}
return (<Tree data={data}/>)