Graph

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();