如何在Vue.js示例中管理v-network-graph的EventHandlers?

huwehgph  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(254)

这是我在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>
j2cgzkjk

j2cgzkjk1#

感谢this post,我已经明白了如何制作它。基本上,当我使用OptionAPI时,我正在学习的documentation正在使用脚本安装!
实际答案:
这里的技巧是不要使用vNG.EventHandlers,而是直接在数据组件中设置事件处理对象,并在图形元素中设置v-bind指令。
代码(请注意,我故意删除了无用的代码,是在前一个职位,使一个更清晰的答案):

<script lang="ts">
import { reactive, ref } from 'vue';
import * as vNG from 'v-network-graph';

const graph = ref<vNG.Instance>();
export default {
  data() {
    return {
      nodes: reactive({ '': { name: '' } }),
      edges: { '': { source: '', target: '' } },
      click_event: {
        'node:click': ({ node }) => {
          window.console.log(this.nodes[node]);
        },
      },
    },
  },
};
</script>

<template>
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :event-handlers="click_event"
    ref="graph"
    class="visualization"
  />
</template>

相关问题