D3 Tree UI

Overview

D3 Tree UI is the library to use tree structure that is made by D3.js.

DEMO

D3 Tree UI - DEMO

Install

npm install d3-tree-ui
yarn add d3-tree-ui

You can also download and use it.

<script src="public/d3-tree-ui.js"></script>

Usage

1. Prepare json data like following structure.

{
  "id": 0,
  "name": "Object",
  "children": [
      {
        "id": 1,
        "parent": 0,
        "name": "navigator",
        "children": []
      },
      {
        "id": 2,
        "parent": 0,
        "name": "window",
        "children": []
      }
  ]
}

2. Create instance in script.

import { D3TreeUI } from "d3-tree-ui";

new D3TreeUI({
  selector: ".tree-wrap",
  json: "./data/sample-data.json",
  addToBottom: ".js-tree-addnode-bottom",
  addToRight: ".js-tree-addnode-right",
  nodeWidth: 200,
  nodeHeight: 32,
  nodeMargin: 8,
});

Option

param	type	description
selector	String	className or Id of element to construct tree
json	String	json file path to make tree
addToBottom	String	className or Id of element to add node to bottom
addToRight	String	className or Id of element to add node to right
nodeWidth	Number	width of each nodes
nodeHeight	Number	height of each nodes
addable	Boolean	whether it can add node
editable	Boolean	whether it can edit node name
draggable	Boolean	whether it can drag node