d3ForceEasy(更新工夫2021年12月7日)

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

D3js force力导向图 简略应用的工具

依赖d3.js >v4.0.0

演示d3ForceEasy

点击进入

应用办法

1.下载d3ForceEasy2.引入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笼罩相应节点和连线的色彩