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