Skip to content
This is a ui library to use hierarchical user interface with d3.js
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.doc
public
src
.babelrc
.gitignore
.npmignore
LICENSE
README.md
package-lock.json
package.json
webpack.config.js

README.md

D3 Tree UI

Overview

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

D3 Tree UI Image

DEMO

DEMO

Install

npm install 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": []
      }
  ]
}
  1. Create instance in script.
import 'd3-tree-ui';

(function () {
   new window.TreeUI({
    json: './data/sample-data.json',
    svg: '#tree',
    wrapper: '.tree-wrap',
    addToBottom: '.js-tree-addnode-bottom',
    addToRight: '.js-tree-addnode-right',
    nodeWidth: 200,
    nodeHeight: 30,
    nodeMargin: 5
  })
}())

Option

param type description
json String json file path to make tree
svg String className or Id of element to construct tree
wrapper String className or Id of wrap element of svg
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
You can’t perform that action at this time.