vue-safe-force-graph 2.0.51 → 2.0.52

package/README.md

@@ -167,6 +167,11 @@ app.use(Graph)
 | handleSelectNodeEvent    | 选择节点事件的props（兼容angular调用，vue可以使用事件方式）  | Function       | 无                                                           | 否       |
 | customContextMenuEvent   | 自定义右键菜单的点击事件，相关配置参考下面的[自定义右键菜单](#自定义右键菜单)。会返回数据 `{   eventName: 'api.name',   customConfig: 'api.customConfig',   nodes: 'nodes',   allNodes: 'this.history.dataNow.nodes', }`（兼容angular调用，vue可以使用事件方式） | Function       | 无                                                           | 否       |
 | handleDataLoaded         | 图加载数据完成后 的事件通知。会返回图中所有的节点数据。（兼容angular调用，vue可以使用事件方式） | Function       | 无                                                           | 否       |
+| nodeWidth                | 节点的宽度                                                   | Number         | 24                                                           | 否       |
+| startNodeWidth           | 起始节点的宽度                                               | Number         | 24                                                           | 否       |
+| linkDistance             | 用于调整**`d3.forceLink` 的距离**：以确保link长度，值越大距离越长。[d3文档](https://d3js.org/d3-force/link#link_distance)   （当配置nodeWidth后可能会用到，比如nodewidth太大时，需要增加link距离） | Number         | 120                                                          | 否       |
+| strength                 | d3js的*manyBody*.strength属性。**调整 `d3.forceManyBody` 的强度**：增加或减少节点之间的排斥力，值为负值，负数越大斥力越大，如0表示无斥力，-600中等斥力。[d3文档](https://d3js.org/d3-force/many-body#manyBody_strength)（当配置nodeWidth后可能会用到，比如nodewidth太大时，需要增加节点之间的斥力） | Number         | -600                                                         | 否       |
+| customTooltip            | 自定义tooltip内容,传入一个函数，函数中能拿到节点数据，函数需返回html模板 | Function       |                                                              | 否       |
 
 ### 自定义右键菜单
 
@@ -271,6 +276,44 @@ app.use(Graph)
 | handle-data-loaded       | 图加载数据完成后 的事件通知。会返回图中所有的节点数据        | `<ForceGraphByCanvas   :graph-api="graphApi"   :module="module"   :start-node="startNode"   @handle-data-loaded="handleDataLoaded"   @custom-contextmenu-click="handleContextmenu"   @handle-select-node="handleSelectNode" />` |
 | custom-contextmenu-click | 自定义右键菜单的点击事件。返回 **eventName** 事件名 、**customConfig**、 **当前点击的nodes** 节点的整个数据， 所有节点**allNodes** | 如上                                                         |
 | handle-select-node       | 选择节点事件                                                 | 如上                                                         |
+| controlOperation         | 操作控制，传入node数据和对应api操作。如显示隐藏按钮          | 示例如下                                                     |
+
+##### controlOperation示例
+
+```js
+<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' }})
+}
+```
+
+##### 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`删除节点
 
 ### 图标加载方式
 
@@ -278,7 +321,123 @@ app.use(Graph)
 
 图谱中的图标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配置
+
+```js
+// 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配置
+
+```js
+{
+    "code": "0",
+    "msg": "ok",
+    "data": {
+        "records": [
+            {
+                "summary": "",
+                "tags": null,
+                "info": {
+                    "id": "sfdsdfsf",
+                    "name": "“xxx",
+                    "type": "report",
+                    "inner_img": "自定义节点图片", // 自定义图片
+                    "basic": {
+                        "title": "“黑球”行动再升级，SMBGhost漏洞攻击进入实战",
+                        "url": "xxxx",
+                        "update_time": "2021-04-29 05:11:53"
+                    },
+                    "extends": null
+                },
+                "brief": []
+            }
+        ]
+    }
+}
+```
+
+###### 获取节点数据接口示例
+
+```js
+{
+  "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": "边的描述文案" // 新增：边的描述文案
+      }
+    ]
+  }
+}
+```
+
+
 
 
 ## 开发相关