Как добавить горизонтальную и вертикальную прокрутку в response-d3-tree?
Когда я заполняю больше данных внутри дерева, тогда дерево переполняется из div и svg, но я хочу добавить идентификатор прокрутки, добавленные дополнительные дочерние элементы. Как я могу это сделать?
Я использую эту библиотеку: https://www.npmjs.com/package/react-d3-tree, вот скриншот:
Можно ли делать то, что я хочу?
Мне нужно решение в reactjs и nextjs. Если это невозможно, предложите мне другую библиотеку, которая работает так же.
Вот пример кода:
import Head from "next/head";
import { useEffect, useState } from "react";
import Leftnav from "../../../Components/Leftnav";
import api from '../../api/Apis'
import Tree from 'react-d3-tree';
const Dashboard = () => {
const orgChart = {
name: 'CEO',
children: [
{
name: 'Manager',
attributes: { department: 'Production', },
children: [
{
name: 'Foreman',
attributes: { department: 'Fabrication', },
children: [{ name: 'Worker', },],
},
{
name: 'Foreman',
attributes: { department: 'Assembly', },
children: [{ name: 'Worker', },],
},
],
},
],
};
return (
<>
<Head>
<title>Dashboard</title>
</Head>
<div className = "mainorder-detail-sec">
<div className = "container">
<div className = "row">
<Leftnav />
<div className = "col-md-9 dashboard-main">
<h3 className = "title">Dashboard page</h3>
<div id = "treeWrapper" className = "tree" style = {{ width: '50em', height: '20em' }}>
<Tree
rootNodeClassName = "node__root"
branchNodeClassName = "node__branch"
leafNodeClassName = "node__leaf"
pathFunc = "step"
orientation='vertical'
translate = {false}
data = {orgChart} />
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Dashboard;
У меня есть ответ на аналогичный вопрос: горизонтальная полоса прокрутки вверху и внизу таблицы Надеюсь, это поможет!
@MichaelRovinsky, я отформатировал это, пожалуйста, помогите мне
@HoldOffHunger нужно какое-либо решение в reactjs или nextjs, пожалуйста, проверьте библиотеку, которую я использую, если возможно, тогда помогите мне. Спасибо
@bablukumar добавить style overflow: auto в элемент оболочки дерева. Помогает?
я пробовал но это не работает
Пожалуйста, отформатируйте свой вопрос правильно (отметив часть кода как код). Рабочий фрагмент или рабочий пример могут быть очень полезны