D3js force力导向图 简单使用的工具 D3ForceEasy

d3ForceEasy(更新时间2021年12月7日)

---

v1.0.3 -新增连线文字和优化新增节点逻辑

D3js force力导向图 简单使用的工具

依赖d3.js >v4.0.0

演示d3ForceEasy

点击进入

使用方法

1.下载d3ForceEasy

2.引入

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

或<script>引入

简单开始

//数据
    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});

配置项

• dom
  容器定义

 dom: document.getElementsByTagName('body')

---

• color
  全局颜色

---

• key
  数据唯一标识，默认为 id

---

• icons
  图标集，对应数据中type各类型，使用svg path的d路径

---

• zoom
  缩放开关，默认开

---

• zoomRange
  缩放范围，默认[0.5, 8]

---

• fixed
  拖动锁定开关，Boolean类型

---

• linkLabel
  连线文字

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

---

• curvature
  连线曲率，默认300，越小越弯

---

• currentClick
  节点点击回调，返回鼠标事件信息和节点信息

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

---

API

• 更新节点

包括新增和删除,仅需修改数据后即可

   charts.update({nodes,links});

• 显示/隐藏名称

    d3ForceEasy.toggleName()

样式

• 可使用css覆盖相应节点和连线的颜色