Vue-safe-force-graph NPM

vue-safe-force-graph

vue-safe-force-graph is a force graph library designed for security applications using Vue.js.

It is compatible with Vue 3 and includes features such as drag-and-drop, lasso selection, and automatic layout.

Installation

You can install vue-safe-force-graph via npm:

npm install vue-safe-force-graph

全局引入

Simply import vue-safe-force-graph in your Vue.js components:

// main.js
import ForceGraph, { Graph, Render } from 'vue-safe-force-graph'
import 'vue-safe-force-graph/lib/style.css'
const app = createApp(App)
app.use(ForceGraph, {
  disableQapm: true, // ture或者false。 true则禁用 Qapm
})

<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>

export default {
  data() {
    return {
      snapshotId: null,
      vcode: null,
      startNode: [{ type: 'domain', id: 'jd.com' }],
      graphApi: {}
    }
  },
  methods: {
    handleEvent(data) {
      console.log('监听菜单事件', data)
    },
    handleDataLoaded(data) {
      console.log('handleDataLoaded', data)
    },
    handleSelectNode(data, dataNow) {
      console.log('dataNow', dataNow)
      console.log('handleSelectNode', data)
    },
    handleHighLight(type, prop, value) {
      // this.$refs.forceGraph.handleCustomSelect(type, prop, value)
    },
  }
}
</script>

组件引入

<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>
import { ForceGraphByCanvas } from 'vue-safe-force-graph'
import 'vue-safe-force-graph/lib/style.css'

export default {
  components: {
    ForceGraphByCanvas
  },
  data() {
    return {
      snapshotId: null,
      vcode: null,
      startNode: [{ type: 'domain', id: 'jd.com' }],
      graphApi: {}
    }
  },
  methods: {
    handleEvent(data) {
      console.log('监听菜单事件', data)
    },
    handleDataLoaded(data) {
      console.log('handleDataLoaded', data)
    },
    handleSelectNode(data, dataNow) {
      console.log('dataNow', dataNow)
      console.log('handleSelectNode', data)
    },
    handleHighLight(type, prop, value) {
      // this.$refs.forceGraph.handleCustomSelect(type, prop, value)
    },
  }
}
</script>

Development

To run the development server

npm run dev

To build the library

npm run build

To publish a new version

npm run patch npm run lib npm publish

开发人员手册

开发请看这里

@element-plus/icons-vue @q/qapm csv-parse d3 d3-lasso element-plus json2csv konva lodash-es mime-types minimist radar-js-analytic-sdk vue vue-clipboard3 vue-router vue-virtual-scroller

@everything-registry/sub-chunk-3091 @infinitebrahmanuniverse/nolb-vue-sa

7 days ago

12 days ago

12 days ago

14 days ago

13 days ago

27 days ago

26 days ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

2 months ago

2 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

5 months ago

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago