@jabbla/graph
javascript svg graph library
Last updated a year ago by jabbla .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @jabbla/graph 
SYNC missed versions from official npm registry.

Graph

npm version

demo

Changelog

v1.2.3

  1. add node toolTip config

Basic Usage

install

You can install the library via npm

npm install @jabbla/graph
import Graph from '@jabbla/graph'

or via CDN

<script src="https://cdn.jsdelivr.net/npm/@jabbla/graph/dist/graph.min.js"></script>
var Graph = window.Graph

init

var renderer = Graph.init(options)

options.el

root element of graph

var options = {el: '#container'};

options.width options.height

specify svg width and height

var options = {el: '#container', width: 200, height: 200};
//output: <svg width="200" height="200"></svg>

options.backgroundColor

backgroundColor of svg element

var options = {
    backgroundColor: '#F6F9FB'
}

options.toolBox

show toolBox

var options = {
    toolBox: true //default true
}

var options = {
    toolBox: {
        zIndex: '100'   //specify toolBox z-index
    }
}

options.svgPanZoomConfig

use library svg-pan-zoom.js, you can customize behaviors on you own

default configurations below, or you can cover it.

var options = {
    svgPanZoomConfig: {
        controlIconsEnabled: true //default true
    }
};

click ariutta/svg-pan-zoom for more infomation

render

render svg with renderOptions

renderer.render(renderOptions)

renderOptions.nodes

graph nodes of current render-frame

{
    nodes: [
        {
            id: 'a',
            name: 'a'
        },
        {
            id: 'b',
            name: 'b'
        }
    ]
}

node.id:id for single node,this field must be unique.

node.name:name for single node.

node.classList:classList for single node,default 'node' class will be applied on node.

renderOptions.links

graph links for current-frame

{
    links: [
        {
            source: 'a',
            target: 'b'
        }
    ]
}

link.source:source-node(node.id

link.target:target-node(node.id

renderOptions.linkConfig

global link config

line or curve

{
    linkConfig: {
        lineType: 'curve' //curve(default),line
    }
}

renderOptions.rowConfig

row config

you can specify row gap、height

{
    rowConfig: {
        gap: 100, //default 100
        height: 35 //default 
    }
}

renderOptions.columnConfig

column config

specify column gap

{
    columnConfig: {
        gap: 20 //default 20
    }
}

renderOptions.node

global node config

single node config will cover renderOptions.node

node.formatter

default formatter will return node.name

{
    node: {
        formatter(node){
            return node.name; //default
        }
    }
}

node.tooltip

node tooltip config

{
    node: {
        tooltip: {
            visible: true, //default true
            formatter(nodeOptions){
                return nodeOptions.name;    //you can also return HTML Text
            }
        }
    }
}

node.icon

specify icon which locate at the left of node-text

there are several built-in icons: sql_icon,spark_icon

{
    node: {
        icon: {
            id: 'sql_icon', //icon id
            color: 'red'    //color for icon
        } 
    }
}

destroy

removeChild from container

renderer.destroy();

Current Tags

  • 1.2.4                                ...           latest (a year ago)

14 Versions

  • 1.2.4                                ...           a year ago
  • 1.2.3                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 16
This Month 16
Last Day 1
Last Week 0
Last Month 1
Dependencies (1)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |