vue-safe-force-graph 2.0.21 → 2.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -1
- package/lib/vue-safe-force-graph.js +12404 -8212
- package/lib/vue-safe-force-graph.umd.cjs +12391 -8199
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ You can install vue-safe-force-graph via npm:
|
|
|
10
10
|
|
|
11
11
|
`npm install vue-safe-force-graph`
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## 全局引入
|
|
14
14
|
|
|
15
15
|
Simply import vue-safe-force-graph in your Vue.js components:
|
|
16
16
|
|
|
@@ -72,6 +72,60 @@ export default {
|
|
|
72
72
|
</script>
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
## 组件引入
|
|
76
|
+
|
|
77
|
+
```vue
|
|
78
|
+
<template>
|
|
79
|
+
<ForceGraphByCanvas
|
|
80
|
+
:graph-api="graphApi"
|
|
81
|
+
module="md5graph"
|
|
82
|
+
:start-node="startNode"
|
|
83
|
+
:enter-start-node="true"
|
|
84
|
+
:has-level="true"
|
|
85
|
+
:snapshot_id="snapshotId"
|
|
86
|
+
:vcode="vcode"
|
|
87
|
+
:handle-select-node-event="handleSelectNode"
|
|
88
|
+
:custom-context-menu-event="handleEvent"
|
|
89
|
+
@handle-data-loaded="handleDataLoaded"
|
|
90
|
+
/>
|
|
91
|
+
</template>
|
|
92
|
+
|
|
93
|
+
<script>
|
|
94
|
+
import { ForceGraphByCanvas } from 'vue-safe-force-graph'
|
|
95
|
+
import 'vue-safe-force-graph/lib/style.css'
|
|
96
|
+
|
|
97
|
+
export default {
|
|
98
|
+
components: {
|
|
99
|
+
ForceGraphByCanvas
|
|
100
|
+
},
|
|
101
|
+
data() {
|
|
102
|
+
return {
|
|
103
|
+
snapshotId: null,
|
|
104
|
+
vcode: null,
|
|
105
|
+
startNode: [{ type: 'domain', id: 'jd.com' }],
|
|
106
|
+
graphApi: {}
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
methods: {
|
|
110
|
+
handleEvent(data) {
|
|
111
|
+
console.log('监听菜单事件', data)
|
|
112
|
+
},
|
|
113
|
+
handleDataLoaded(data) {
|
|
114
|
+
console.log('handleDataLoaded', data)
|
|
115
|
+
},
|
|
116
|
+
handleSelectNode(data, dataNow) {
|
|
117
|
+
console.log('dataNow', dataNow)
|
|
118
|
+
console.log('handleSelectNode', data)
|
|
119
|
+
},
|
|
120
|
+
handleHighLight(type, prop, value) {
|
|
121
|
+
// this.$refs.forceGraph.handleCustomSelect(type, prop, value)
|
|
122
|
+
},
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
</script>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
|
|
75
129
|
## Development
|
|
76
130
|
|
|
77
131
|
### To run the development server
|