React D3 Tree

Modified React D3 Tree by bkrem/react-d3-tree, this custom AlphaSights React D3 Tree is used for displaying Hierarchies. The original React D3 component lets you represent hierarchical data (e.g. ancestor trees, organisational structure, package dependencies) as an animated & interactive tree graph by leveraging D3's tree layout. This customized version supports:

• Inverted trees and sub-trees.
• Hidden nodes
• Link styles specified on a source-target basis
• Hidden links

Contents

• Installation
• Usage
  • Hiding nodes
  • Custom link styles
  • Inverted trees
• Props
• Node shapes
  • Overridable shapeProps
  • Individual shapeProps
• Styling
• Pre-defining a node's _collapsed state
• Keeping large trees responsive
• External data sources
  • Example
• Using foreignObjects
  • nodeLabelComponent
    • Example
• Recipes
  • Auto-centering inside treeContainer
  • Adding & removing nodes dynamically

Installation

yarn add alphasights-react-d3-tree --ignore-engines

or

npm i --save alphasights-react-d3-tree

Usage

import React from 'react';
import Tree from 'alphasights-react-d3-tree';

const myTreeData = [
  {
    name: 'Top Level',
    attributes: {
      keyA: 'val A',
      keyB: 'val B',
      keyC: 'val C',
    },
    children: [
      {
        name: 'Level 2: A',
        attributes: {
          keyA: 'val A',
          keyB: 'val B',
          keyC: 'val C',
        },
      },
      {
        name: 'Level 2: B',
      },
    ],
  },
];

class MyComponent extends React.Component {
  render() {
    return (
      {/*  will fill width/height of its container; in this case `#treeWrapper` */}
      <div style="{{width:" id="treeWrapper">

        

      </div>
    );
  }
}

Hiding nodes

Set the node type to hidden:

const myTreeData = [
  {
    name: 'Top Level',
    attributes: {
      keyA: 'val A',
      keyB: 'val B',
      keyC: 'val C',
    },
    children: [
      {
        name: 'Level 2: A',
        attributes: {
          keyA: 'val A',
          keyB: 'val B',
          keyC: 'val C',
        },
      },
      {
        name: 'Level 2: B',
      },
    ],
  },
];

Custom link styles

Use the linkStyle attribute:

const myTreeData = [
  {
    type: 'hidden',
    children: [
      {
        name: 'Top Level 1',
        linkStyle: {
          stroke: "#ff6602",
          "stroke-dasharray": 4
        },
        attributes: {
          keyA: 'val A',
          keyB: 'val B',
          keyC: 'val C',
        },
        children: [
          {
            name: 'Level 2: A',
            attributes: {
              keyA: 'val A',
              keyB: 'val B',
              keyC: 'val C',
            },
          },
          {
            name: 'Level 2: B',
          },
        ],
      },
      {
        name: 'Top Level 2',
        children: [
          {
            name: 'Level 2: A',
            attributes: {
              keyA: 'val A',
              keyB: 'val B',
              keyC: 'val C',
            },
          },
          {
            name: 'Level 2: B',
          },
        ],
      },
    ]
  }
];

Inverted trees

To create inverted sub-trees, set the inverted attribute to true:

const myTreeData = [
  {
    name: "My root",
    inverted: true,
    children: [
      {
        name: 'Top Level 1',
        linkStyle: {
          stroke: "#ff6602",
          "stroke-dasharray": 4
        },
        attributes: {
          keyA: 'val A',
          keyB: 'val B',
          keyC: 'val C',
        },
        children: [
          {
            name: 'Level 2: A',
            attributes: {
              keyA: 'val A',
              keyB: 'val B',
              keyC: 'val C',
            },
          },
          {
            name: 'Level 2: B',
          },
        ],
      },
      {
        name: 'Top Level 2',
        children: [
          {
            name: 'Level 2: A',
            attributes: {
              keyA: 'val A',
              keyB: 'val B',
              keyC: 'val C',
            },
          },
          {
            name: 'Level 2: B',
          },
        ],
      },
    ]
  }
];

Props