0

I am trying to use react-d3-tree to make a tree but I can not make the text for the names go under the node circle so this it is readabe. I have managed to use the css class to change to colour of the nodes but can't seem to edit the text position there or in the main code. Reading this https://openbase.com/js/react-d3-tree/versions they got rid of the textLayout prop but I can't find a suitable alternative.

homePage.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;
}

Current result with blue arrow showing wanted result

Lucy
  • 11
  • 2

1 Answers1

1

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

Lucy
  • 11
  • 2