D3-force-layout NPM

模块介绍

本模块是d3.js的关系图封装库，支持功能罗列如下。

包含实体（节点），关系（线条），以有向图形式展示。
能体现实体的关键程度以及关系的强弱。实体的关系越多，半径则越大。关系权重越大，线条就越粗。
实现实体检索以及关系检索，快速定位。
实现以某一个实体为中心点展开其相关实体及关系。
支持单击，双击事件订阅。比如注册单击事件，用户可自定义响应后查看实体或关系详情。
支持自定义右键菜单。用户可自定义不同菜单项及对应的响应事件。
查看某实体时，自动直观显示其邻接点，其它实体模糊化。
展示样式配置。用户可由不同的节点或线条类型自定义个性化的展示效果。
算法分析

如何使用

npm install
npm run build即可在dist生成relation-chart.js，其它项目使用直接引入relation-chart.js即可
使用类RelationChart渲染关系图

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配置描述
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
- lineConf 线条样式配置，有以下三种方式可以配置（优先级：单个节点配置>类型配置>全局配置，详情见以下案例）
  - 全局配置（通过在default字段下配置）
    - strokeColor 线条颜色（默认值'rgb(128, 194, 216)'）
    - strokeDasharray svg虚线样式设置，如果不设置，则展示为实线（默认''）
  - 类型配置（通过类型名type字段下配置）
    - strokeColor
    - strokeDasharray
  - 单个节点配置（在结点数据下增加style字段）
    - strokeColor
    - strokeDasharray
- events事件
  - 节点事件（node字段下）
    - click 单击事件（支持节点和关系）
    - dblclick 双击事件（支持节点和关系）
    - contextMenu节点右键菜单（支持节点和关系）
    - add 添加节点事件（在这里将节点数据真正添加到数据库中，需要返回promise）
    - deleteTag 删除标签（从数据库中将标签从节点中删除，需要返回promise）
  - 关系事件（link字段下）
    - click 单击事件（支持节点和关系）
    - dblclick 双击事件（支持节点和关系）
    - contextMenu节点右键菜单（支持节点和关系）
    - add 添加节点事件（在这里将结点数据真正添加到数据库中，需要返回promise）

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();
                    }
                }]
            }
        }
    });

@types/d3 d3 d3-context-menu d3-force-cluster pretty-checkbox

@infinitebrahmanuniverse/nolb-d3 @everything-registry/sub-chunk-1437

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago