关于javascript:d3ForceEasy-一个封装D3js-force力导向图-简单使用的轮子

d3ForceEasy

github 地址 -> 内有示例代码
v1.0.2
一个封装 D3js force 力导向图 简略应用的轮子

依赖 d3.js >v4.0.0

示例

代码在 test 文件中

应用办法

1.npm install d3_force_easy --save   
2. 引入配置和数据
import  d3ForceEasy from 'd3_force_easy'
import 'd3ForceEasy.css'    
...
// 根底配置
const option = {dom:document.getElementById('app'), 
    nodes:this.nodes,
    links:this.links, 
... 
}    
d3ForceEasy.drawForce(option)

测试数据

const nodes = [{name:'2.2.2.2',id:12,type:'ip'}, {name:'3.4.25.22',id:13,type:'ip'}, {name:'13020002299',id:14,type:'phone'}, {name:'asdmklasdlnlwee.pdf',id:15,type:'file'}, {name:'sdf78f6s87d5fsud7fts87d6587r23grbusd7f78',id:16,type:'md5'}, {name:'15838837736',id:17,type:'phone'},]
const links = [{source:0,target:1}, {source:0,target:2},   {source:0,target:3}, {source:3,target:4},{source:3,target:5},]

具体配置

* 为必填项

 const option = {*dom: document.getElementsByTagName('app'), 
    color: '#00a8ff',// 单色或 ['#fff',#'ccc'...]，无 color 默认随机色
    *nodes:this.nodes,// 参考下面的实例数据
    *links:this.links, 
    icons:[{type:'ip',icon:'(svg <path> 的 d 门路属性)'},...],
 //icon 默认为圆形
     zoom:true,// 开启缩放
     zoomRange:[1,8],// 缩放范畴
    text:{show:true, // 初始显示文字与否}
 }

性能

1. 新增节点

 d3ForceEasy.addNodes(newNodesSourceId = 0,newNodes = []) //newNodesSourceId-> 源节点 id，newNodes-> 新增节点数组 

2. 删除选中节点

 d3ForceEasy.removeNode()    

3. 显示 / 暗藏名称

 d3ForceEasy.toggleName()    

4. 返回以后选中节点数据

 d3ForceEasy.currentNode()

款式

可应用 css 笼罩相应节点和连线的色彩