d3-network click event - 如何接收点击的节点定义？

Question

我一直在使用 d3-network Vue component，我想在单击时显示节点的名称。下面是这个组件的用法：

<d3-network :net-nodes="nodes" :net-links="links" :options="options" @node-click="testFunc()" />

这里是 nodes 和 links 数组。

      nodes: [
        { id: 1, name: "Node 1", _color: "#aa00bb" },
        { id: 2, name: "Node 2" },
        { id: 3, name: "Node 3" },
        { id: 4, name: "Node 4" },
        { id: 5, name: "Node 5" },
        { id: 6, name: "Node 6" },
        { id: 7, name: "Node 7" },
        { id: 8, name: "Node 8" },
        { id: 9, name: "Node 9" },
      ],
      links: [
        { sid: 1, tid: 2 },
        { sid: 2, tid: 8 },
        { sid: 3, tid: 4 },
        { sid: 4, tid: 5 },
        { sid: 5, tid: 6 },
        { sid: 7, tid: 8 },
        { sid: 5, tid: 8 },
        { sid: 3, tid: 8 },
        { sid: 7, tid: 9 },
      ],

组件看起来像这样；

单击节点时触发 @node-click="testFunc()"。我想要做的是在单击每个节点元素时显示它们的名称。我怎么做？告警时是否显示在控制台上并不重要。

Answer 1

阅读 docs!

node-click 接收两个参数 - event 和 node-object

 <d3-network :net-nodes="nodes" :net-links="links" :options="options" @node-click="onClick" />

...在脚本部分：

  methods: {
    onClick(event, node) {
      console.log(event)
      console.log(JSON.stringify(node))
    }
  }

Answer 2

来自他们的文档：https://github.com/emiliorizzo/vue-d3-network

节点点击：点击节点时触发，发出（事件，节点对象）

这意味着您将收到“事件”对象作为第一个参数，实际的“节点”对象作为第二个参数。

testFunc(event, node) {
  console.log(node)
}

d3-network click event - 如何接收点击的节点定义？

d3-network click event - how to receive clicked node definition?

onclick

vue.js