This is a network graph lib based on Threejs, in order to optimize rendering over thousands of nodes in webgl mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="./static/research-graph.js"></script>
<style type="text/css">
#canvas {
width: 100%;
height: 100%;
background-color: #161E28;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script>
const canvas = document.getElementById('canvas')
const graph = new NetworkGraph(canvas)
const nodes = [
{
"id":"1",
"label":"HUMAN",
"position":{"x":20,"y":1},
"style": {
"color": "#5CCEC2"
}
},
{
"id":"2",
"label":"CAR",
"position":{"x":0,"y":1},
"style": {
"color": "#4FA3FF"
}
},
{
"id":"3",
"label":"PHONE",
"position":{"x":-20,"y":1},
"style": {
"color": "#EF8DBA"
}
}
]
const edges = [
{"id":"a","source":"1","target":"2"},
{"id":"c","source":"1","target":"2"},
{"id":"b","source":"2","target":"1"},
{"id":"d","source":"2","target":"3"},
{"id":"e","source":"3","target":"2"},
{"id":"f","source":"3","target":"2"}
]
graph.addNodes(nodes)
graph.addEdges(edges)
</script>
</body>
</html>
This is a network graph lib based on Threejs, in order to optimize rendering over thousand of nodes in webgl mode.
| Param | Description |
|---|---|
| dom | Canvas document |
| customConfig | Network graph global custom config, this will override default config ( graphDefaultConfig.js ) |
| dataType | type | config |
|---|---|---|
| node | Object | { id (required), position, icon(font, scale, content), label, imgUrl, style( color, activeColor, size, borderSize, borderColor, activeBorderColor, fillColor, fillActiveColor, labelColor, labelActiveColor, labelFontSize, labelFontFamily, labelScale, imgColor, imgActiveColor, iconColor, iconActiveColor), ...anyelse} |
| curveEdge | Object | { id*(required), source(required), target(required)*, controlPointCenterOffset, visible, ...anyelse} |
| straightEdge | Object | { id*(required), source(required), target(required)*, visible, ...anyelse} |
| Method | Arguments | Description |
|---|---|---|
| addNodes (nodesData) | nodesData(Array) required: Each element is a node type data | Add nodes in graph. |
| addEdges (edgesData, edgeType) | edgesData(Array) required: Each element is a curveEdge/straightEdge type data. edgeType(String): One of 'curve' or 'straight'. Default is 'straight' |
Add specific edges in graph. |
| updateEdgesVisibility (edgeIds, visible) | edgeIds(Array) required: Need to update visibility edges id. visible(Boolean) required: Edges visible status. |
Change edges visible status. |
| updateNodesPosition (nodesData) | nodesData(Array) required: Each element is a node type data with updated postion. | Update node position when new position need to be set. |
| updateEdgesPosition (edges) | edges(Array) required: Edges need to update, edges are edge type data. | Change edges position when source or target position change or need to update curve edge controlPointCenterOffset. |
| updateNodesColor (nodeIds, color) | nodeIds(Array) required: Need to update color nodes id. color(Strinfg) required: Color to change (enable Color, Hex, or String). |
Change nodes color. |
| updateEdgesColor (edgeIds, color) | edgeIds(Array) required: Need to update color edges id. color(Strinfg) required: Color to change (enable Color, Hex, or String). |
Change edges color. |
| selectNodesByIds (nodeIds) | nodeIds(Array) required: Need to select node id. | Select nodes by id. |
| selectEdgesByIds (edgeIds) | edgeIds(Array) required: Need to select edges id. | Select edges by id. |
| deleteNodes (nodeIds) | nodeIds(Array) required: Need to delete nodes ids. | Delete nodes by id. |
| deleteEdges (edgeIds) | edgeIds(Array) required: Need to delete edges ids. | Delete edges by id. |
| destroy | null | Unbind event and set handler to be null. |
| snapshot (type) | type(String): Output canvas data url type | Take snapshot of current graph. |
| transformToViewPosition (x, y) | x(Numbner): world position x. y(Numbner): world position y |
Transform canvas 2d position to 3d view position |
| updateRendererSize (width, height) | width(String unit px): width canvas should change to. height(String unit px): height canvas should change to |
Change graph width and height when container size change |
| enableBoxSelect | null | Start box select |
| disableBoxSelect | null | Stop box select |
| Event | Param | Description |
|---|---|---|
| clickStage | {param: {event}} | When click stage will be triggered |
| rightClickStage | {param: {event}} | When right click stage will be triggered |
| dblclickStage | {param: {event}} | When double click stage will be triggered |
| clickNode | {param: {target, event}} | When click node will be triggered |
| rightClickNode | {param: {target, event}} | When right click node will be triggered |
| dblclickNode | {param: {target, event}} | When double click node will be triggered |
| hoveronNode | {param: {target, event}} | When hover on node will be triggered |
| hoveroffNode | {param: {target, event}} | When hover off node will be triggered |
| clickEdge | {param: {target, event}} | When click edge will be triggered |
| rightClickEdge | {param: {target, event}} | When right click edge will be triggered |
| dblclickEdge | {param: {target, event}} | When double click edge will be triggered |
| hoveronEdge | {param: {target, event}} | When hover on edge will be triggered |
| hoveroffEdge | {param: {target, event}} | When hover off edge will be triggered |
| boxSelect | {param: {nodeIds, edgeIds}} | When box select end will be triggered |
| nodesPositionChanged | {param: {nodesPosition}} | When drag node end will be triggered |
| item | Destription | Default |
|---|---|---|
| camera | Construct of fov, near, far, position. Refer to threejs perspective camera [https://threejs.org/docs/#api/en/cameras/PerspectiveCamera] |
{fov: 45, near: 1, far: 1000, position: [0, 0, 100]} |
| viewPort | Construct of targetPosition,enableRotate, zoomMinRatioOfCamera, zoomMaxRatioOfCamera. |
{targetPosition: [0, 0, 10],enableRotate: false,zoomMinRatioOfCamera: 0.8,zoomMaxRatioOfCamera: 50} |
| nodeSize | Node size | 3 |
| nodeColor | Node color | '#5CCEC2' |
| nodeActiveColor | Node selected color | '#FFFFFF' |
| nodeFillColor | Node fill color | '#161E28' |
| nodeFillActiveColor | Node selected fill color | '#161E28' |
| nodeBorderSize | Node border size | 0.2 |
| nodeBorderColor | Node border color | '#5CCEC2' |
| nodeActiveBorderColor | Node selected border color | '#FFFFFF' |
| nodeLabelColor | Node label color | '#8196AC' |
| nodeLabelActiveColor | Node selected border color | '#C6DEF0' |
| nodeLabelFontSize | Node label font size | 50 |
| nodeLabelScale | Node label scale set for higher resolution | 0.05 |
| nodeLabelFontFamily | Node label font family | 'sans-serif' |
| nodeImgColor | Node fill image color | nodeImgColor |
| nodeImgActiveColor | Node selected image color | '#FFFFFF' |
| nodeIconColor | Node fill icon color | '#5CCEC2' |
| nodeIconActiveColor | Node selected fill icon color | '#FFFFFF' |
| showImg | Whether to show node fill image | true |
| showLabel | Whether to show node fill label | true |
| showIcon | Whether to show node fill icon | true |
| curveEdgeColor | Curve edge color | '#8196AC' |
| curveEdgeSelectedColor | Curve edge selected color | '#FFFFFF' |
| curveEdgeLineWidth | Curve edge line width | 0.1 |
| curveEdgeControlPointCenterOffset | Curve edge control point center offset | 5 |
| curveEdgeArrow | Whether to show curve edge direction | true |
| curveEdgeArrowLength | Set curve edge arrow length | 2 |
| curveEdgeArrowWidth | Set curve edge arrow width | 1 |
| straightEdgeColor | Straight edge color | '#8196AC' |
| straightEdgeSelectedColor | Straight edge selected color | '#FFFFFF' |
| straightEdgeLineWidth | Curve edge line width | 0.2 |
| straightEdgeArrow | Whether to show straight edge direction | false |
| straightEdgeArrowLength | Set straight edge arrow length | 2 |
| straightEdgeArrowWidth | Set straight edge arrow width | 1 |
| boxSelect | Whether enable box select | true |
| selectionBoxStyles | Set box selection box style, construct of border , backgroundColor |
{border: '1px solid #55aaff',backgroundColor: 'rgba(75, 160, 255, 0.3)'} |
| boxSelectEnableType | Box select type | ['node', 'edge'] |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent