d3-force-layout
v1.9.7
Published
本模块是d3.js的关系图封装库，支持功能罗列如下。 - 包含实体（节点），关系（线条），以有向图形式展示。 - 能体现实体的关键程度以及关系的强弱。实体的关系越多，半径则越大。关系权重越大，线条就越粗。 - 实现实体检索以及关系检索，快速定位。 - 实现以某一个实体为中心点展开其相关实体及关系。 - 支持单击，双击事件订阅。比如注册单击事件，用户可自定义响应后查看实体或关系详情。 - 支持自定义右键菜单。用户可自定义不同菜单项及对应的响应事件。 - 查看某实体时，自动直观显示其邻接点，其它
Downloads
11
Readme
模块介绍
本模块是d3.js的关系图封装库，支持功能罗列如下。
- 包含实体（节点），关系（线条），以有向图形式展示。
- 能体现实体的关键程度以及关系的强弱。实体的关系越多，半径则越大。关系权重越大，线条就越粗。
- 实现实体检索以及关系检索，快速定位。
- 实现以某一个实体为中心点展开其相关实体及关系。
- 支持单击，双击事件订阅。比如注册单击事件，用户可自定义响应后查看实体或关系详情。
- 支持自定义右键菜单。用户可自定义不同菜单项及对应的响应事件。
- 查看某实体时，自动直观显示其邻接点，其它实体模糊化。
- 展示样式配置。用户可由不同的节点或线条类型自定义个性化的展示效果。
- 算法分析
如何使用
- npm install
- npm run build即可在dist生成relation-chart.js，其它项目使用直接引入relation-chart.js即可
- 使用类RelationChart渲染关系图
相关DEMO演示
- 当前项目执行npm start,访问http://localhost:8081 即可，DEMO源码参照src>index.ts。
- 网安业务图谱分析前端项目，使用VUE实现，参照 [email protected]:TopMind/net-security-graph.git
RelationChart参数说明
- 选择器：选择器为字符串类型，api使用querySelector获取dom元素
- data：是数据内容，包含了nodes数组和links数组。
- nodes（节点对象数组，节点包含以下字段）
- 基本字段
- id 唯一标识 节点ID号
- title 节点名称（可以为空）
- type 节点类型 （可以为空）
- 可选字段
- 其它一些需要通过信息面板显示的字段
- tags 该节点上打的标签数组
- id 标签ID 唯一性
- name 标签名字
- icon 标签对应图标路径
- style 样式对象（给单个节点配置样式）各字段详情含义见nodeConf配置描述
- textSize
- textColor
- min
- max
- step
- url
- fillColor
- strokeColor
- strokeWidth
- 基本字段
- relations（关系对象数组，关系包含以下字段）
- 基本字段
- id 唯一标识 关系ID
- type 关系类型 （可以为空）
- source 源点对象或ID
- target 目标点对象或ID
- weight 表示线条权重（weight越大，线条越粗，为空值默认为1）
- 可选字段
- 其它一些需要通过信息面板显示的字段
- style 样式对象（给单个关系配置样式）各字段详情含义见lineConf配置描述
- 基本字段
- nodes（节点对象数组，节点包含以下字段）
- config：可配置展示样式及注册交互事件
- width 图谱长度
- height图谱高度
- linkDistance 节点间连线长度
- chargeValue 节点间排斥力
- enableZoom 鼠标控制关系图移动及放大缩小
- puffUrl 异常结点图片路径
- nodeConf 节点样式配置，有以下三种方式可以配置（优先级：单个节点配置>类型配置>全局配置，详情见以下案例）
- 全局配置（通过在default字段下配置）
- textShow 是否显示节点文字（结点文字是否显示只能全局配置所有节点，默认false）
- textSize 文字大小 （默认12）
- textColor 文字颜色 （默认'#000）
- min 节点半径最小设置 （默认13）
- max 节点半径最大设置 （默认100）
- step 节点步长、每增加一条连线半径的增长值（默认1）
- url 填充图案 (默认'')
- fillColor 填充颜色 (默认'rgb(255, 76, 10)')
- strokeColor 描边颜色 (默认'')
- strokeWidth 描边大小 (默认0)
- 类型配置（通过类型名type字段下配置）
- textSize
- textColor
- min
- max
- step
- url
- fillColor
- strokeColor
- strokeWidth
- 单个节点配置（在节点数据下增加style字段）
- textSize
- textColor
- min
- max
- step
- url
- fillColor
- strokeColor
- strokeWidth
- 全局配置（通过在default字段下配置）
- lineConf 线条样式配置，有以下三种方式可以配置（优先级：单个节点配置>类型配置>全局配置，详情见以下案例）
- 全局配置（通过在default字段下配置）
- strokeColor 线条颜色 （默认值'rgb(128, 194, 216)'）
- strokeDasharray svg虚线样式设置，如果不设置，则展示为实线 （默认''）
- 类型配置（通过类型名type字段下配置）
- strokeColor
- strokeDasharray
- 单个节点配置（在结点数据下增加style字段）
- strokeColor
- strokeDasharray
- 全局配置（通过在default字段下配置）
- events事件
- 节点事件（node字段下）
- click 单击事件（支持节点和关系）
- dblclick 双击事件（支持节点和关系）
- contextMenu节点右键菜单 （支持节点和关系）
- add 添加节点事件（在这里将节点数据真正添加到数据库中，需要返回promise）
- deleteTag 删除标签（从数据库中将标签从节点中删除，需要返回promise）
- 关系事件（link字段下）
- click 单击事件（支持节点和关系）
- dblclick 双击事件（支持节点和关系）
- contextMenu节点右键菜单 （支持节点和关系）
- add 添加节点事件（在这里将结点数据真正添加到数据库中，需要返回promise）
- 节点事件（node字段下）
RelationChart API
基本API
- setConfig(config)：重新设置配置 深拷贝
- redraw(config)：重新设置配置、清空画布并重绘
- showNodeText(isShow)：显示/隐藏节点文字
- transform(x, y, k)：关系图手动控制移动位置及放大缩小（x：X轴移动距离、y:Y轴移动距离、k:缩放倍数）
- updateWH(w,h) 更新画布宽高
- setStatus(status)：设置画布当前的状态
- 1 表示点击画布可添加节点
- 2 表示点击A节点、再点击B节点，可在两个节点之间添加连线
- 3 表示点击A节点、再点击B节点，可显示两个节点之间最短路径
- getStatus()：获取画布当前状态值
- batchUpdate(nodes, links)：批量更新节点及关系数据
- addNode(node)：添加一个或多个结点(node可以单个节点数据或者是节点数组)
- updateNodeInfo(id, info)：修改单个节点数据对象值（id节点号、info需要修改的节点对象）
- removeNode(data)：移除节点及其关系（data是节点数据）
- nodes()：返回所有节点数据
- addLink(link)：添加一个或多个关系(link可以是单条连线、也可以是数组)
- updateLinkInfo(id, info)：更新关系信息
- removeLink(data)：删除关系连线
- links()：返回所有关系数据
- search(nodeName, relType) 搜索
- 只有nodeName，根据节点名找到名字为nodeName的结点
- 有节点名nodeName, relType连线类型 找到线条类型是relType，线条的source或target是nodeName的连线
- refresh()：刷新画布算法分析类API：目前支持路径溯源、环形依赖以及异常点等
- getPaths(startNode,endNode)方法表示路径溯源 , startNode表示起始节点，endNode表示结束节点
- getCycle方法获取关系图所有的环形依赖
- getSpecialNodes方法获取所有异常点
- highlight(nodes,links)方法表示高亮关系图中的节点与连线，在算法分析中经常用到。
- setHighlightMode方法表示设置高亮模式，仅展示算法相关的节点与连线，其余图形隐藏
- cancelHighlightMode方法表示取消高亮模式，展示所有的节点与连线RelationChart Example
（1）在项目中使用
<script type="text/javascript" src="relation-chart.js"></script>（2）关系图数据结构（模拟产生一些测试数据）
let nodes = [],links= [];
let newNode = {
id: guid(), //guid为生成唯一标识的方法
title: "192.168.191.1",
type: "IP"
};
let newNode2 = {
id: guid(),
title: "dns server 1",
type: "DNS",
tags: [{ id: `tag_1`, name: '收藏aaaa', icon: './assets/images/icon-heart.png' }],
style: {
// textSize: 12,
textColor: 'red',
min: 20,
max: 100,
step: 1,
fillColor: 'red',
strokeColor: 'rgba(255,215,0,0.4)',
strokeWidth: 3,
url: './assets/images/icon-start.png'
}
};
nodes.push(newNode);
nodes.push(newNode2 );
let link = {
target: nodes[target],
id: guid(),
title: "rel",
source: nodes[source],
type: Math.floor(Math.random()*10)%2 === 0?"ATTACK":"RELY",
weight:Math.floor(Math.random()*3+1)
};
links.push(link);（3）创建RelationChart对象
let chart = new RelationChart("#canvas", {
nodes: nodes,
links: links
}, {
puffUrl: "http://118.126.90.43:9080/puff",
height: document.documentElement.clientHeight,
width: document.documentElement.clientWidth - 250,
linkDistance: 150,
chargeValue: -500,
enableZoom: true,
nodeConf: {
default: {
textShow: true
},
email: {
url: `./assets/images/mail.svg`,
textColor: '#5aafec',
fillColor: '#5aafec'
},
dns: {
fillColor: '#b4a0db',
url: `./assets/images/dns.svg`,
textColor: '#b4a0db'
},
ip: {
fillColor: '#31c5c7',
url: `./assets/images/ip.svg`,
textColor: '#31c5c7'
},
account: {
fillColor: '#feb77f',
url: `./assets/images/account.svg`,
textColor: '#feb77f'
}
},
lineConf: {
visit: {
strokeColor: '#9bfc84'
},
login: {
strokeColor: '#73dad7'
},
analysis: {
strokeColor: '#ff7b33',
strokeDasharray: '5,5'
}
},
events: {
node: {
click: (data) => {
showInfo(data);
},
dblclick: (data) => {
console.log("dblclick", data);
},
contextMenu: [{
title: '最短路径算法',
children: [
{
title: "设为开始结点",
action: function (data, index) {
startVert = data;
distanceEvent();
}
}, {
title: "设为结束结点",
action: function (data, index) {
endVert = data;
distanceEvent();
}
}
]
}, {
title: "环",
action: function (data, index) {
let results = chart.getCycle();
showAgorithmInfo(Agorithm.Cycle, results);
}
}, {
title: "异常点",
action: function (data, index) {
let results = chart.getSpecialNodes();
showAgorithmInfo(Agorithm.SpecialNodes, results);
}
}, {
title: "展开相关实体和关系",
action: function (data, index) {
let newNodes = createNodes(3);
nodes = nodes.concat(newNodes);
let i = 0;
for (let node of newNodes) {
chart.addNode(node);
let link = createLink(data.id, node.id, links.length + i);
chart.addLink(link);
links.push(link);
i++;
}
chart.refresh();
// nodes = chart.nodes();
// links = chart.links();
updateTypeNum();
}
}, {
title: "移除当前节点",
action: function (data, index) {
let rmvLink = chart.removeNode(data);
chart.refresh();
//nodes = chart.nodes();
//links = chart.links();
statNodes[nodeTypes.indexOf(data.type)]--;
for (let link of rmvLink) {
statRel[relTypes.indexOf(link.type)]--;
}
nodes = nodes.filter(item => item.id != data.id);
let rmvLinkIds = rmvLink.map(item => item.id);
links = links.filter(item => rmvLinkIds.indexOf(item.id) == -1);
updateTypeNum();
}
}, {
title: "标签",
children: [
{
title: `<img src='./assets/images/icon-heart.png' /> 收藏`,
action: (data, index) => {
console.log(data, index);
chart.addTag(data, { text: '收藏', url: './assets/images/icon-heart.png' })
}
}
]
}]
},
link: {
click: (data) => {
showInfo(data);
},
dblclick: (data) => {
console.log("dblclick", data);
},
contextMenu: [{
title: '删除',
action: (data, index) => {
chart.removeLink(data);
nodes = chart.nodes();
links = chart.links();
updateTypeNum();
}
}]
}
}
});