在Sigma.js的节点中添加onclick事件

Add onclick event to nodes in Sigma.js

本文关键字：添加 onclick 事件 节点 Sigma js      更新时间：2023-09-26

我在sigma.js中有一个非常简单的示例，它读取带有一些附加数据的gef文件。

// Instanciate sigma.js and customize rendering :
var sigInst = sigma.init(document.getElementById('graph-container')).drawingProperties({
    defaultLabelColor: '#fff',
    defaultLabelSize: 14,
    defaultLabelBGColor: '#fff',
    defaultLabelHoverColor: '#000',
    labelThreshold: 6,
    defaultEdgeType: 'straight'
}).graphProperties({
    minNodeSize: 0.5,
    maxNodeSize: 5,
    minEdgeSize: 1,
    maxEdgeSize: 1
}).mouseProperties({
    maxRatio: 4
});
// Parse a GEXF encoded file to fill the graph
// (requires "sigma.parseGexf.js" to be included)
sigInst.parseGexf(gexfFile);

这实际上只是取自一个教程。现在，我想向所有节点添加一个单击事件。谁能告诉我做这件事的正确方法?

根据官方文件:

s = new sigma({...});
// Bind the events:
s.bind('overNode outNode clickNode doubleClickNode rightClickNode', function(e) {
    console.log(e.type, e.data.node.label, e.data.captor);
});
https://github.com/jacomyal/sigma.js/blob/master/examples/events.html

(接受的答案对我不起作用)

Step1 -编写事件处理程序 

function onClick(event) {
    window.console.log("clicked!");
}

步骤2 -查找事件名称

我一直想知道事件的名称可以是什么。似乎"onmouseover"， "onmousedown"等已经被重命名，"onmouse"部分被截断，"nodes"被附加在末尾。

对于click事件，它将是'downnodes'

步骤3 -链接处理程序到点击事件:

必须使用bind()函数将事件处理程序绑定到事件名称。

sigInst.bind('downnodes',onClick).draw();

事件列表@ v1.0.3

感谢Matt提供的列表。

click, rightClick, clickStage, doubleClickStage, rightClickStage, clickNode, clickNodes, doubleClickNode, doubleClickNodes, rightClickNode, rightClickNodes, overNode, overNodes, outNode, outNodes, downNode, downNodes, upNode, upNodes -都应该是小写的

相关文章：