vis-network节点类型为image为什么拖拽连线会变小
时间: 2024-01-12 21:04:56 浏览: 29
vis-network是一个基于JavaScript的图形可视化库,用于创建各种类型的图形和网络图。节点类型为image的情况下,拖拽连线变小可能是因为节点的尺寸太小,导致连线也跟随缩小了。您可以尝试增加节点的尺寸或调整连线的属性来解决这个问题。同时,也可以检查一下您的代码中是否有设置节点和连线的默认大小或样式,是否与您期望的一致。
相关问题
vue 使用vis-network拖拽连线为什么节点大小会变
在 `vis-network` 中,节点大小和连线的位置是相互关联的。当你拖拽连线时,节点大小会发生变化,这是正常的行为,因为 `vis-network` 会自动调整节点大小以适应新的连线位置。
如果你想禁止节点大小随连线位置变化,可以在 `vis-network` 的 `options` 中设置 `manipulation` 属性,并将 `enabled` 设置为 `false`,示例代码如下:
```html
<template>
<div id="network" ref="network"></div>
</template>
<script>
import vis from 'vis-network'
export default {
mounted() {
const container = this.$refs.network
const nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'}
]
const edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 3, to: 4}
]
const data = {nodes, edges}
const options = {
manipulation: {
enabled: false // 禁止拖拽连线时节点大小变化
}
}
new vis.Network(container, data, options)
}
}
</script>
```
以上代码中,我们通过设置 `manipulation.enabled` 为 `false` 来禁止拖拽连线时节点大小的变化。
vue使用vis-network实现动态拖拽连线
可以通过以下步骤来实现:
1. 安装 vis-network 和 vis-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
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)