# d3-tree-ui

> This is a library to use hierarchical user interface like a File System.

Latest version **0.1.0** (published 2023-02-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install d3-tree-ui
pnpm add d3-tree-ui
yarn add d3-tree-ui
bun add d3-tree-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-02-18 |
| First published | 2017-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | cawpea |
| Maintainers | masaki-ohsumi |

## Links

- npm: https://www.npmjs.com/package/d3-tree-ui
- Repository: https://github.com/cawpea/d3-tree-ui
- Homepage: https://github.com/cawpea/tree-ui#readme
- Issues: https://github.com/cawpea/tree-ui/issues
- npm.io page: https://npm.io/package/d3-tree-ui

## Dependencies (1)

- [d3](https://npm.io/package/d3.md) ^4.10.2

## Recent versions

- 0.1.0 (latest) — 2023-02-18
- 0.0.1 — 2017-09-18

## README

# D3 Tree UI

## Overview

D3 Tree UI is the library to use tree structure that is made by [D3.js](https://d3js.org/).

<img src="https://github.com/masaki-ohsumi/d3-tree-ui/blob/develop/.doc/d3-tree-ui-image.png" alt="D3 Tree UI Image">

## DEMO

[D3 Tree UI - DEMO](https://d3-tree-ui.web.app/)

## 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.

```json:sample-data.json
{
  "id": 0,
  "name": "Object",
  "children": [
      {
        "id": 1,
        "parent": 0,
        "name": "navigator",
        "children": []
      },
      {
        "id": 2,
        "parent": 0,
        "name": "window",
        "children": []
      }
  ]
}
```

2. Create instance in script.

```js:sample.js
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                         |

---
_Source: https://npm.io/package/d3-tree-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._