v1.2.3
- add node toolTip config
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
var renderer = Graph.init(options)
root element of graph
var options = {el: '#container'};
specify svg width and height
var options = {el: '#container', width: 200, height: 200};
//output: <svg width="200" height="200"></svg>
backgroundColor of svg element
var options = {
backgroundColor: '#F6F9FB'
}
show toolBox
var options = {
toolBox: true //default true
}
var options = {
toolBox: {
zIndex: '100' //specify toolBox z-index
}
}
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 svg with renderOptions
renderer.render(renderOptions)
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.
graph links for current-frame
{
links: [
{
source: 'a',
target: 'b'
}
]
}
link.source:source-node(node.id)
link.target:target-node(node.id)
global link config
line or curve
{
linkConfig: {
lineType: 'curve' //curve(default),line
}
}
row config
you can specify row gap、height
{
rowConfig: {
gap: 100, //default 100
height: 35 //default
}
}
column config
specify column gap
{
columnConfig: {
gap: 20 //default 20
}
}
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
}
}
}
removeChild from container
renderer.destroy();