vue-safe-force-graph v2.0.64

vue-safe-force-graph

vue-safe-force-graph 是一个使用 Vue3、d3.js 、 canvas 开发的可视化溯源关系图。

安装

npm install vue-safe-force-graph

使用方式

可以在组件中引入 或者可以在全局引入注册组件。

方式一：组件中引入

在vue组件中引入Graph组件和样式：

import { Graph } from 'vue-safe-force-graph'
import 'vue-safe-force-graph/lib/style.css'

完整index.vue示例如下：

<template>
  <div class="graph-container">
    <Graph
      :graph-api="graphApi"
      :module="module"
      :start-node="startNode"
      :enter-start-node="true"
      :has-level="true"
      :snapshot_id="snapshotId"
      :vcode="vcode"
      :handle-select-node-event="handleSelectNode"
      :custom-context-menu-event="handleEvent"
      :singles-node-max-num="500"
      @handle-data-loaded="handleDataLoaded"
    />
  </div>
</template>
<script setup>

import {
  getGraphConfig, getGraphRequest, getNodesDetail, getSnapshotDetail,
} from 'src/api/graph'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'
import { Graph } from 'vue-safe-force-graph'
import 'vue-safe-force-graph/lib/style.css'

const module = ref('graph')
const startNode = ref([])
const vcode = ref(null)
const snapshotId = ref(null)
const forceGraph = ref(null)

function addSnapshot(params) {
  return request({
    url: `/graph/v1/snapshot/add?module=${module.value}`,
    method: 'post',
    data: params
  })
}

const graphApi = {
  getGraphConfig: getGraphConfig,
  getGraphRequest: getGraphRequest,
  getNodesDetail: getNodesDetail,
  addSnapshot1: addSnapshot,
  getSnapshotDetail: getSnapshotDetail,
}

const route = useRoute()

snapshotId.value = route.query.snapshot_id
vcode.value = route.query.vcode

if (route.query.type && route.query.id) {
  startNode.value = [
    {
      type: route.query.type,
      id: route.query.id
    }
  ]
}

const handleHighLight = (type, prop, value) => {
  console.log('forceGraph', forceGraph.value)
  forceGraph.value.handleCustomSelect(type, prop, value)
}

const handleEvent = (data) => {
  console.log('监听菜单事件', data)
}
const handleSelectNode = (data) => {
  console.log('handleSelectNode', data)
}
function handleDataLoaded(data) {
  console.log('handleDataLoaded', data)
}
</script>
<style lang="scss">
.graph-container {
  height: calc(100vh - 66px);
}
</style>

方式二：全局引入

在main.js中引入并注册。

// main.js
import { createApp } from 'vue'
import Graph from 'vue-safe-force-graph'
import 'vue-safe-force-graph/lib/style.css'
const app = createApp(App)
app.use(Graph)

在自己的业务组件中使用，全局注册的组件名为ForceGraphByCanvas，示例如下 ：

<template>
  <ForceGraphByCanvas
      :graph-api="graphApi"
      module="md5graph"
      :start-node="startNode"
      :enter-start-node="true"
      :has-level="true"
      :snapshot_id="snapshotId"
      :vcode="vcode"
      :handle-select-node-event="handleSelectNode"
      :custom-context-menu-event="handleEvent"
      @handle-data-loaded="handleDataLoaded"
    />
</template>

<script setup>
// 此处js代码参考上面组件引入的实例
</script>

组件属性

自定义右键菜单

在config接口中配置节点的右键菜单项，图组件拿到数据后渲染到页面上， 并绑定点击事件。点击后emit出去相关的数据。使用者监听该事件，然后自行处理后续流程。

菜单项配置在下面详情接口中，data => records => info => extraNodeContextMenus字段，如

{
    'code': '0',
    'msg': 'ok',
    'data': {
      'records': [
        {
          'summary': '',
          'tags': [],
          'info': {
            // 额外右键菜单项
            'extraNodeContextMenus': [
              {
                name: 'dealwith1', // 菜单唯一标识，用于点击事件传出去
                namec: '菜单1 无children', // 菜单展示的文案
                icon: 'button_edit_label', // 右键菜单的图标，不传的话默认一个图标
                customConfig: { // 透传自定义配置
                  input: 'xxxxx',
                  a: 'ceshi'
                }
              },
              {
                name: 'dealwith2',
                namec: '菜单2 无children',
                customConfig: {
                  input: 'xxxxx',
                  a: 'ceshi'
                },
                // children 二级菜单
                children: [
                  {
                    name: 'xxx',
                    namec: 'xxx',
                    customConfig: {
                      input: '333',
                      a: 'ces3333hi'
                    }
                  }
                ]
              },
              {
                name: 'dealwxxith3',
                namec: 'xxx',
                children: [
                  {
                    name: 'xxx',
                    namec: 'xxx',
                    children: [
                      {
                        name: 'threelevel',
                        namec: '三级菜单'
                      }
                    ]
                  }
                ]
              }
            ],
            'id': '1234',
            'name': '123',
            'type': 'url',
            'basic': {
              'level': '未知',
              'check_time': '',
              'desc': ''
            },
            'extends': null
          },
          'brief': []
        },
        {
          'summary': '',
          'tags': [],
          'info': {
            'id': '234234',
            'name': '234234',
            'type': 'url',
            'basic': {
              'level': '未知',
              'check_time': '',
              'desc': ''
            },
            'extends': null
          },
          'brief': []
        }
      ]
    }
  }

事件

方法

controlOperation示例

<ForceGraphByCanvas
  ref="forceGraph"
  graph-url-path="/hmGraphByCanvas"
  :graph-api="graphApi"
  :module="module"
  :start-node="startNode"
  @handle-data-loaded="handleDataLoaded"
/>

/*
* 参数格式 { nodes: [{ id: '8c5c0cda7d0f3ec28e818b441037cf2d' }], api: { name: 'show_node' }}
*  */
function showNode() {
  forceGraph.value.controlOperation({ nodes: [{ id: '8c5c0cda7d0f3ec28e818b441037cf2d' }], api: { name: 'show_node' }})
}
function hideNode() {
  forceGraph.value.controlOperation({ nodes: [{ id: '8c5c0cda7d0f3ec28e818b441037cf2d' }], api: { name: 'hide_node' }})
}

// 全部展示数据节点边的label
function allShowEdgeLabel() {
  forceGraph.value.controlOperation({ api: { name: 'all_show_edges_label' }})
}
// 全部隐藏数据节点边的label
function allHideEdgeLabel() {
  forceGraph.value.controlOperation({ api: { name: 'all_hide_edges_label' }})
}

controlOperation其他api name

• edit_label修改label
• single_edge_select 单边顶点选择
• hold_aggregation单边顶点聚合
• release_aggregation聚合顶点释放
• node_star收藏
• un_node_star取消收藏
• show_label show_names 显示节点名称
• un_show_names un_show_label 隐藏节点名称
• fix_nodes固定节点
• un_fix_nodes取消固定节点
• delete_node删除节点

handleCustomSelect

const handleHighLight = () => {
  forceGraph.value.handleCustomSelect('include', 'id', ['xxxs0'])
}

图标加载方式

图标icon图片有2中加载方式：1从cdn中加载，2打包为base64到npm包中加载。

图谱中的图标icon默认是从cdn链接中加载的。如果您存在私有化部署不能访问公网的场景，可以联系作者打包base64版本。

其他配置项

1.关系节点增加统计数字

在config配置中的的plugs对应的新增一个 show_total 字段,布尔值 true 或者 false。

2.icon自定义图标的图片

数据节点的图标。 节点详情detail接口的 info下 新增 icon_img字段 存在，则使用此 icon_img 图片。 可以是图片链接或者是base64。

关系节点的图标。 在config接口的plugs字段下对应的位置，加一个icon_img字段，用于关系节点的图标。

3.节点线上 增加描述文案

在获取节点和link的接口中，在links字段下面，新增一个字段 edge_label，字符串，如果有值则展示此文案，没有则不展示。

config配置

// config配置
{
    "code": "0",
    "msg": "ok",
    "request_id": "QJDysikHdHqtwhMRQFek",
    "data": {
        "plugs": {
            "md5": [
                {
                    "show_total": true, // 是否展示增加统计数字
                    "icon_img": "https://files.codelife.cc/icons/google.svg", // 自定义关系节点图标的图片
                    "canloop": true,
                    "icon": "file",
                    "name": "xxx",
                    "namec": "释放文件",
                    "path": "xxxx",
                    "relay_name": "释放文件"
                },
            ]
        }
    }
}

detail配置

{
    "code": "0",
    "msg": "ok",
    "data": {
        "records": [
            {
                "summary": "",
                "tags": null,
                "info": {
                    "id": "sfdsdfsf",
                    "name": "“xxx",
                    "type": "report",
                    "icon_img": "自定义节点图片", // 自定义图片
                    "basic": {
                        "title": "“黑球”行动再升级，SMBGhost漏洞攻击进入实战",
                        "url": "xxxx",
                        "update_time": "2021-04-29 05:11:53"
                    },
                    "extends": null
                },
                "brief": []
            }
        ]
    }
}

获取节点数据接口示例

{
  "code": "0",
  "msg": "ok",
  "data": {
    "nodes": [
      {
        "id": "a",
        "name": "a",
        "type": "md5",
        "origin": [],
        "feature": {}
      },
      {
        "id": "b",
        "name": "b",
        "type": "md5",
        "origin": [],
        "feature": {}
      }
    ],
    "links": [
      {
        "source": "a",
        "target": "b",
        "type": "domain-md5",
        "desc": "",
        "feature": {},
        "edge_label": "边的描述文案" // 新增：边的描述文案
      }
    ]
  }
}

开发相关

To run the development server

npm run dev

To build the library

npm run lib

To publish a new version

npm run patch npm run lib npm publish

开发人员手册

开发请看这里

如有问题请联系 jiangzhenxiang