vue使用Vis.Network制作图谱


//首先要加载VIS
npm install vis --save

//在main.js中引入配置项
import "vis/dist/vis.css"

//在使用的页面引入该组件
import Vis from "vis";

//在template中的部分
<!--width,height 画布的宽度,高度。 可以是百分比或像素,一般在dom元素上设置 -->
    <div id="network_id" class="network" style="height: 500px;"></div>

//在script中的部分
data() {
	return {
		nodesArray: [],  //节点数组
		edgesArray: []  //关系线数组
	}
},
mounted() {
      // 初始化
      let container = document.getElementById("network_id");
       let data = { nodes: this.nodesArray, edges: this.edgesArray }
       let options = {
          autoResize: true, //网络将自动检测其容器的大小调整,并相应地重绘自身
          locale: "cn", //语言设置:工具栏显示中文
          // 设置节点样式
          nodes: {
            shape: "dot", //节点的外观。为circle时label显示在节点内,为dot时label显示在节点下方
            margin: 5, //当形状设置为box、circle、database、icon、text;label的边距
            widthConstraint: 100, //设置数字,将节点的最小和最大宽度设为该值,当值设为很小的时候,label会换行,节点会保持一个最小值,里边的内容会换行
            borderWidth: 1, //节点边框宽度,单位为px
            borderWidthSelected: 3, //节点被选中时边框的宽度,单位为px
            labelHighlightBold: false, //确定选择节点时标签是否变为粗体
          },
          // 边线配置
          edges: {
            width: 1,
            length: 200,
            arrows: { to: true }, //箭头指向to
          },
          interaction: {
            hover: true,
            hoverConnectedEdges: true
          },
          //计算节点之前斥力,进行自动排列的属性
          physics: {
            enabled: true, //默认是true,设置为false后,节点将不会自动改变,拖动谁谁动。不影响其他的节点
            maxVelocity: 20,
            minVelocity: 0.1
          }
        };
      let network = new Vis.Network(container, data, options);
    },


//以下为完整代码与点边设置
<template>
  <div class="Vis">
    <!--width,height 画布的宽度,高度。 可以是百分比或像素,一般在dom元素上设置 -->
    <div id="network_id" class="network" style="height: 500px;"></div>
    <!--节点悬停-->
    <div class="menu" id="divHoverNode" style="display:none;"></div>
  </div>
</template>
<script>
  import Vis from "vis";
  export default {
    data() {
      return {
        //   节点数组
        nodesArray: [
          {
            "type": "Project",
            "label": "kernel_git_pcmoore_selinux",
            "id": 3559072,
            "releaseTime": "2006-08-22 12:00:00",
            "licenses": [
              "GPL-2.0",
              "GPL"
            ],
            "copyrights": [
              {
                "context": "Copyright (C) 1989, 1991 Free Software Foundation, Inc.",
                "time": "1989, 1991",
                "author": "Free Software Foundation, Inc.",
                "integrity": 3
              },
              {
                "context": "copyrighted
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤来实现: 1. 安装 vis-networkvis-util: ```bash npm install vis-network vis-util --save ``` 2. 在 Vue 组件中引入 vis-network: ```javascript import { Network } from 'vis-network/standalone/esm/vis-network' import 'vis-network/styles/vis-network.min.css' ``` 3. 在 Vue 组件中创建一个容器来放置 vis-network: ```html <div ref="networkContainer" style="height: 500px;"></div> ``` 4. 在 Vue 组件中初始化 vis-network,并设置节点和边: ```javascript mounted() { const container = this.$refs.networkContainer const data = { nodes: [ { id: 1, label: 'Node 1' }, { id: 2, label: 'Node 2' }, { id: 3, label: 'Node 3' } ], edges: [] } const options = {} this.network = new Network(container, data, options) } ``` 5. 监听节点拖拽事件,获取节点位置: ```javascript this.network.on('dragEnd', (event) => { const nodeId = event.nodes[0] const nodePosition = this.network.getPositions([nodeId])[nodeId] console.log(nodePosition) }) ``` 6. 监听边创建事件,获取边的起始节点和结束节点: ```javascript this.network.on('beforeDrawing', (ctx) => { this.network.getSelectedEdges().forEach(edgeId => { const edge = this.network.body.edges[edgeId] const fromNode = this.network.body.nodes[edge.from] const toNode = this.network.body.nodes[edge.to] const fromPosition = fromNode.getCenterPosition() const toPosition = toNode.getCenterPosition() console.log(fromPosition, toPosition) }) }) ``` 7. 监听鼠标事件,创建连线: ```javascript let fromNodeId = null this.network.on('click', (event) => { if (event.nodes.length > 0) { fromNodeId = event.nodes[0] } }) this.network.on('doubleClick', (event) => { if (event.nodes.length > 0) { const toNodeId = event.nodes[0] const edgeId = this.network.addEdge(fromNodeId, toNodeId) this.network.selectEdges([edgeId]) fromNodeId = null } }) ``` 这样就可以实现动态拖拽连线了。完整的代码示例可以参考以下链接: https://codesandbox.io/s/vue-vis-network-dynamic-draggable-edges-7m2yf?file=/src/components/Network.vue
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值