d3ForceEasy-D3js force force guide diagram easy to use tool

d3ForceEasy (updated on December 7, 2021)

---

v1.0.3
-Added connection text and optimized new node logic

D3js force force guide diagram Simple to use tool

Depends on d3.js >v4.0.0

Demo d3ForceEasy

click to enter

Instructions

1.下载d3ForceEasy

2.引入

import  d3ForceEasy from 'd3_force_easy'
import 'd3ForceEasy.css'

或<script>引入

Start simple

//数据
    const nodes = [
        {name:'2.2.2.2',id:12,type:'ip'},
        ...
    ]

    const links = [
        {source:12,target:13,relation:'长期'},
        {source:17,target:14},
        ...
    ]

//配置项
    const option = {
        dom:document.getElementById('app'),
        color:'#00a8ff',
        zoom:true,
        key:'id',
        icons:[
            {type:'ip',icon:'M512 64C...'},
            ...
            ],
        currentClick:currentClickCallBack,
    }
//初始化
    let charts = d3ForceEasy.initForce(option);
//注入数据
    charts.update({nodes,links});

Configuration item

• dom
  
  Container definition

   dom: document.getElementsByTagName('body')
  

  ---

• color
  
  Global color

  ---

• key
  
  Data unique identification, the default is id

  ---

• icons
  
  Icon set, corresponding to type the data, using the d path of svg path

  ---

• zoom
  
  Zoom switch, default on

  ---

• zoomRange
  
  Zoom range, default [0.5, 8]

  ---

• fixed
  
  Drag the lock switch, Boolean type

  ---

• linkLabel
  
  Connection text

  linkLabel:{
            //开关
            show:true,
            //标识
            key:'relation'
        }
  

  ---

• curvature
  
  The curvature of the connection line, the default is 300, the smaller the curvature

  ---

• currentClick
  
  Node click callback, return mouse event information and node information

  /*
     * 返回选中数据
     * */
     let current = '';
     function currentClickCallBack(e,d){
         current = d;
     })
  

  ---

  API

• update node

Including adding and deleting, only need to modify the data

   charts.update({nodes,links});

• show/hide name

    d3ForceEasy.toggleName()

style

• can use css to cover the colors of the corresponding nodes and connections