这是我在stackoverflow上第一个问题!
我是Vue.js的新手,目前我正在尝试使用v-network-graph组件显示节点网络图并与之交互。我正在努力使用EventHandler,因为我真的不知道如何创建它并与之交互。我是否应该在另一个示例中启动它并将其直接导入到这个示例中?您能帮助我了解如何管理事件处理程序吗?
我尝试了下面的代码,希望它能在控制台中打印出我单击的节点的id:
<script lang="ts">
import { reactive, ref } from 'vue';
import * as vNG from 'v-network-graph';
import {
ForceLayout,
ForceNodeDatum,
ForceEdgeDatum,
} from 'v-network-graph/lib/force-layout';
const graph = ref<vNG.Instance>();
export default {
data() {
return {
nodes: { '': { name: '' } },
edges: { '': { source: '', target: '' } },
layouts: {
nodes: {
node0: {
x: 0,
y: 0,
fixed: true,
},
},
},
configs: reactive(
vNG.defineConfigs({
node: {
selectable: true,
label: {
direction: 'center',
color: '#eeeeee',
},
normal: {
radius: 48,
},
},
view: {
autoPanAndZoomOnLoad: 'fit-content',
minZoomLevel: 1,
maxZoomLevel: 2,
layoutHandler: new ForceLayout({
positionFixedByDrag: false,
positionFixedByClickWithAltKey: true,
}),
},
}),
),
};
},
methods: {
async getNodes() {
await fetch('http://127.0.0.1:5000/getNodes')
.then((response) => response.json())
.then((data) => { this.nodes = (data); });
},
async getEdges() {
await fetch('http://127.0.0.1:5000/getEdges')
.then((response) => response.json())
.then((data) => { this.edges = (data); });
},
},
beforeMount() {
this.getNodes();
this.getEdges();
const eventHandlers: vNG.EventHandlers = {
'node:click': ({ node }) => {
window.console.log(this.nodes[node]);
},
};
},
mounted() {
this.$refs.graph.fitToContents();
},
};
</script>
<template>
<v-network-graph
:nodes="nodes"
:edges="edges"
:configs="configs"
:layouts="layouts"
:event-handlers="eventHandlers"
ref="graph"
class="visualization"
/>
</template>
<style>
.visualization {
width: 100%;
height: 100vh;
border: 1px solid #000;
}
</style>
1条答案
按热度按时间j2cgzkjk1#
感谢this post,我已经明白了如何制作它。基本上,当我使用OptionAPI时,我正在学习的documentation正在使用脚本安装!
实际答案:
这里的技巧是不要使用
vNG.EventHandlers
,而是直接在数据组件中设置事件处理对象,并在图形元素中设置v-bind
指令。代码(请注意,我故意删除了无用的代码,是在前一个职位,使一个更清晰的答案):