react-d3-tree获取要显示在节点下的名称

Question

我正试图使用react-d3-tree来创建一个树，但我无法将名称的文本放在节点圆下，因此它是readabe。我已经设法使用css类来更改节点的颜色，但似乎无法编辑那里或主代码中的文本位置。正在阅读此https://openbase.com/js/react-d3-tree/versions他们去掉了textLayout道具，但我找不到合适的替代品。

主页.js

import React from 'react';
import './common.css';
import Tree from 'react-d3-tree';
export class HomePage extends React.Component {
constructor(props) {
super(props);
const onboardingTree = {
name: 'Raise Access Request',
children: [
{
name: 'Complete Training',
attributes: {
Details: 'Please contact blank to enroll on a training session',
},
children: [
{
name: 'Complete Test',
},
],
},
],
};
this.state = {
onboardingTree: onboardingTree,
};
}
componentDidMount() {
const dimensions = this.treeContainer.getBoundingClientRect();
this.setState({
translate: {
x: dimensions.width / 10,
y: dimensions.height / 10,
},
});
}
render() {
return (
<div>
<div className="container mx-auto mt-14 pt-1 ">
<br />
<div className="flex mt-1 mb-3 pl-4  justify-between">
<p className="page-title">Welcome</p>
</div>
<hr className="my-2" />
<div className=" flex flex-wrap  ">
<div style={{ width: '650px', height: '290px', textAlign: 'left' }} className="w-full ml-5 mt-4 py-1 px-3 border rounded-2xl ">
<div className="w-full">
<p className="py-2 lead font-bold ">Onboarding</p>
<div className="flex justify-center pt-2">
<div style={{ width: '1000px', height: '100vh' }} ref={(tc) => (this.treeContainer = tc)}>
<Tree
data={this.state.onboardingTree}
translate={this.state.translate}
collapsible={false}
rootNodeClassName="node__root"
branchNodeClassName="node__branch"
leafNodeClassName="node__leaf"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default HomePage;

common.css

.node__root > circle {
fill: rgb(255, 255, 255);
stroke: #e21717;
}
.node__branch > circle {
fill: rgb(255, 255, 255);
stroke: #f8e327f3;
}
.node__leaf > circle {
fill: rgb(255, 255, 255);
stroke: #10e256;
}

当前结果，蓝色箭头显示想要的结果

Answer 1

.rd3t-label { translate: -100px 33px !important; font-size: 13px; }