关于javascript:d3ForceEasyD3js-force力导向图-简单使用的工具

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笼罩相应节点和连线的色彩