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

Usage

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>

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

开发人员手册

开发请看这里