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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理