简体   繁体   English

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

[英]Add onclick event to nodes in Sigma.js

I have a very simple example in sigma.js that reads a gexf-file with some additional data. 我在sigma.js中有一个非常简单的例子,它读取带有一些附加数据的gexf文件。

// 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);

This is actually just taken from a tutorial. 这实际上只是从教程中获取的。 Now I'd like to add an on-click event to all nodes. 现在,我想向所有节点添加一个on-click事件。 Can anyone tell me a proper way to do this? 谁能告诉我一个正确的方法来做到这一点?

According to the official documentation: 根据官方文件:

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 https://github.com/jacomyal/sigma.js/blob/master/examples/events.html

(The accepted answer did not work for me.) (接受的答案对我不起作用。)

Step1 - Writing the event handler 第1步 - 编写事件处理程序

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

Step 2 - Finding the event name 第2步 - 查找事件名称

I've been wondering for a while what the event name could be. 我一直想知道活动名称可能是什么。 It appears the "onmouseover", "onmousedown", etc have been renamed with the "onmouse" part truncated and "nodes" appended at the end. 看起来“onmouseover”,“onmousedown”等已被重命名,其中“onmouse”部分被截断,“nodes”被追加到末尾。

So for a click event it will be 'downnodes' 所以对于点击事件,它将是'downnodes'

Step 3 - Linking the handler to the click event: 第3步 - 将处理程序链接到click事件:

You have to use the bind() function to bind an event handler to an event name. 您必须使用bind()函数将事件处理程序绑定到事件名称。

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

Events list @ v1.0.3 事件列表@ v1.0.3

Thanks to Matt for providing the list. 感谢Matt提供的清单。

click, rightClick, clickStage, doubleClickStage, rightClickStage, clickNode, clickNodes, doubleClickNode, doubleClickNodes, rightClickNode, rightClickNodes, overNode, overNodes, outNode, outNodes, downNode, downNodes, upNode, upNodes - all should be lowercase. click,rightClick,clickStage,doubleClickStage,rightClickStage,clickNode,clickNodes,doubleClickNode,doubleClickNodes,rightClickNode,rightClickNodes,overNode,overNodes,outNode,outNodes,downNode,downNodes,upNode,upNodes - all应为小写。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM