如何在Angular-nvd3图表的forceDirectedGraph中查找单击事件

Question

Iam正在Angular-nvd3 forceDirectedGraph上显示数据。

我已经绘制了图表，但仅在forceDirectedGraph中无法触发单击事件。我的问题是，当我单击任何节点时，我需要打开一个弹出窗口并显示有关该节点的数据。

我在angular-nvd3网站上进行了一些研究，但无法找到单击事件，该事件通常会像下面的代码所示：

dispatch: {  
                elementMouseover: (t, u)=>{


                },
                elementMouseout: (t, u)=>{


                },
                elementClick: (t, u) =>{

                }
            }

而且我应该将数据绑定在angular 6范围内，或者我可以调用一个函数来绑定它。

[请找到以下我从事的代码，并以正确的方式建议我。

Plunkr

Answer 1

可以在nodeExtras功能内完成。如下图所示，在Plunkr中扩展它时，如果在其上单击鼠标，则将在警报中显示“字符串化”节点对象。当鼠标指针悬停在节点上时，它也会更改光标（变为手形光标）。

nodeExtras: function(node) {
      node 
      .attr('cursor', 'pointer')
      .on('click', n => alert(JSON.stringify(n)))
      && node
      .append("text")
      .attr("dx", 10)
      .attr("dy", ".55em")
      .text(function(d) { return d.name;})
      .style('font-size', '10px');
},

代替'click'，您可能宁愿选择'dblclick'，否则每次用户拖动节点时都会显示警报。