Graph
Changelog
v1.2.3
- add node toolTip config
Basic Usage
install
You can install the library via npm
npm install @jabbla/graphimport Graph from '@jabbla/graph'or via CDN
<script src="https://cdn.jsdelivr.net/npm/@jabbla/graph/dist/graph.min.js"></script>var Graph = window.Graphinit
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();