@eyes22798/svg-tree-org
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

svg-tree-org

A simple organization tree chart based on svg and Vue2.x

Features:

  • Expand and shrink
  • switch direction
  • custom node by slot
  • custom line
  • zoom
  • drag
  • fitContent

Usage

NPM

# use npm
npm i eyes22798/svg-tree-org

# use yarn
yarn add eyes22798/svg-tree-org

Import Plugins

import Vue from 'vue'
import SvgTreeOrg from '@eyes22798/svg-tree-org'

Vue.use(SvgTreeOrg)

// ...

API

props

prop descripton type default
data Array
direction String vertical
zoomable Boolean true
draggable Boolean true
collapsable children node is collapsable Boolean false
treeCenter center vertically and horizontally Boolean true
defaultScale graph init scale Number 1
lineColor line color String #ddd
lineWidth line width String 1px
lineArrow line decorate right arrow Object { open: false, markerWidth: 5, markerHeight: 8, refX: 0, refY: 4, margin: 0 }
lineCircle line decorate left dot Object { open: false, markerWidth: 5, markerHeight: 8, refX: 0, refY: 4, r: 3, strokeWidth: 2, margin: 4 }
nodeWidth set node width Number 100
nodeHeight set node height Number 60
rootNodesep root svg sep Number 10
marginSize node sep Number 10
linkNodeData Cross node link Array -

events

event name descripton type
click Click event Function
mouseover onMouseOver event Function
mouseout onMouseOut event Function

Call events

on-line-mouseover

It is called when the mouse hovers over the line.

  • params e Event
  • params data Current node data

on-line-mouseout

It is called when the mouse leaves the line.

  • params e Event
  • params data Current node data

Example

default

License

MIT

Package Sidebar

Install

npm i @eyes22798/svg-tree-org

Weekly Downloads

0

Version

0.0.4

License

MIT

Unpacked Size

1.16 MB

Total Files

23

Last publish

Collaborators

  • eyes22798