如何向使用react-d3-tree创建的大型组织图表添加滚动条

Question

我正在使用

react-d3-tree

库在我的 React 应用程序中创建组织结构图（组织图表）。组织结构图非常适合较小的数据集，但随着组织规模的扩大，我面临着启用滚动以查看整个组织结构图的挑战。

我已经集成了该库，并且我的组织结构图正在正确呈现。但是，当图表变得太大而无法容纳在视口中时，它会被切断，我可以拖动整个组织结构图并查看它，但这很不方便。

我想向组织结构图或包含的元素添加一个滚动条，以便用户可以垂直或水平滚动来浏览整个组织结构图，尤其是当它变大时。

这是

orgchart.tsx

文件，

import React, { useRef, useState } from "react";
import { Tree, RawNodeDatum } from "react-d3-tree";
import OrgData from "./orgData";
import {
  TreeData,
  updateStateMessage,
} from "../../../slices/treeSlice/treeData";
import { useSelector } from "react-redux";
import {Box, Button} from "@mui/material";
import { useAppSelector } from "../../../slices/store";

const OrgChart = ({}) => {
  const nodeSize = { x: 400, y: 120 };
  const foreignObjectProps = {
    width: 350,
    height: 300,
    x: -200,
    y: -50,
  };


  const treeData = useAppSelector((state) => state.tree);
  const [firstTreeData, setFirstTreeData] = useState<TreeData | null>(null);

  const restructureTreeData = (node: TreeData): RawNodeDatum => {
    const data: RawNodeDatum = {
      name: node.firstName,
      attributes: {
        profile_pic: node.employeeThumbnail,
        employee_name: node.firstName + " " + node.lastName,
        designation: node.jobRole,
        email: node.workEmail,
        team: node.team,
        managerEmail: node.managerEmail,
        subTeam: node.subTeam,
        businessUnit: node.businessUnit,
        location: node.location,
      },
      children: [],
    };

    if (node.children && node.children.length > 0) {
      data.children = node.children.map((childNode) =>
        restructureTreeData(childNode)
      );
    }
    return data;
  };

  const renderForeignObjectNode = ({ nodeDatum, foreignObjectProps }: any) => {
    return (
      <g>
        <circle r={12}></circle>
        {/* Node data */}
        <foreignObject {...foreignObjectProps}>
          <OrgData
            profile_pic={nodeDatum.attributes.profile_pic}
            name={nodeDatum.attributes.employee_name}
            designation={nodeDatum.attributes.designation}
            email={nodeDatum.attributes.email}
            subTeam={nodeDatum.attributes.subTeam}
            businessUnit={nodeDatum.attributes.businessUnit}
            location={nodeDatum.attributes.location}
            team={nodeDatum.attributes.team}
            department={nodeDatum.attributes.department}
            zoomLevel= {0.3}
            selectedEmployee={firstTreeData?.workEmail}
          />
        </foreignObject>
      </g>
    );
  };

  const treeConfig = {
    pathFunc: "step",
    translate: { x: 100, y: window.innerHeight/2},
    transitionDuration: 1000,
    separation: { siblings: 1, nonSiblings: 1 }
  };
  const transformedTreeData: RawNodeDatum = restructureTreeData(treeData);
  const printableRef = useRef(null);

  return (
    <div>
      <Box style={{ height: '100vh'}} ref={printableRef}>
            <Tree
              data={transformedTreeData}
              orientation= "horizontal"
              translate={treeConfig.translate}
              nodeSize={nodeSize}
              separation={treeConfig.separation}
              pathFunc="step"
              scaleExtent={{ max: 1.0, min: 0.1 }}
              zoomable={false}
              zoom={0.45}
              transitionDuration={treeConfig.transitionDuration}
              enableLegacyTransitions={true}
              renderCustomNodeElement={(rd3tProps) =>
                renderForeignObjectNode({ ...rd3tProps, foreignObjectProps })
              }
            />
        </Box>
    </div>
  );
};

export default OrgChart;

Answer 1

感觉你可以在盒子组件中添加这样的东西

sx={{ maxWidth: '100%', // 设置你想要的最大宽度 OverflowX: 'auto', // 当内容超过最大宽度时添加水平滚动条 }}