D3-Force-Graph

Intro

D3-Force-Graph is a javascript component which can create a force-directed graph using D3-force and web worker for calculation layout and ThreeJS for rendering. It can support large amount datasets rendering (~ 100k nodes and links) and custom styles.

Online Demos

Install

npm i d3-force-graph --save

Usage

let chart = new D3ForceGraph(container, data, config)

Example:

import {D3ForceGraph} from 'd3-force-graph'

let $container = document.getElementById('container')
let testData = {
  nodes: [{
    id: 'TestNodeA'
  }, {
    id: 'TestNodeB'
  }],
  links: [{
    source: 'TestNodeA',
    target: 'TestNodeB'
  }]
}
let chart = new D3ForceGraph($container, testData, {
  width: 500,
  height: 500
})

params

• container: HTMLElement
• data: GraphData

{
  nodes: [{
    id: 'c2Fkcw',                             // mandatory,   string,   unique node id
    name: 'TestNodeA'                         // optional,    string,   node alias
    scale: 1                                  // optional,    number,   node size scale, default is 1
    image: 'https://example.com/example.jpg'  // optional,    string,   node image url
  }, ...],
  links: [
    source: 'c2Fkcw',                         // mandatory,   string,   link source node id
    target: 'c2Fkcy',                         // mandatory,   string,   link target node id
   color: [255, 255, 255]                     // optional,    array,    link color, [R, G, B] from 0 ~ 255, default is [255, 255, 255]
  ]
}

• config: GraphBaseConfig

{
  width: 600,                               // mandatory,   number,   chart width
  height: 600,                              // mandatory,   number,   chart height
  nodeSize: 3000,                           // optional,    number,   node size, rendering node size = nodeSize * node.scale, default is 3000
  arrowSize: 1250,                          // optional,    number,   arrow size, default is 1250
  showArrow: true,                          // optional,    boolean,  show arrow, default is true
  zoomNear: 75,                             // optional,    number,   max zoom in, default is 75
  zoomFar: 16000                            // optional,    number,   max zoom out, default is 16000
}

events

You can use instance.events.on(eventName, callback) to add event listener.

• tick: triggered after every d3-force tick event
• end: triggered after d3-force end event

License

MIT