d3-tree-ui v0.1.0

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