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

Question

我有一个非常简单的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);

这实际上只是从教程中摘取的。现在我想为所有节点添加一个on-click事件。有人能告诉我一个正确的方法吗？

- Gijs

Answer 1

根据官方文档：

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

(所接受的答案对我没有用。)

- RGH

---

这是我认为正确的答案。需要注意的是，overNode outNode clickNode doubleClickNode rightClickNode 都是独立的事件，如果需要，可以绑定单独的回调函数。 - anu

Answer 2

步骤1 - 编写事件处理程序

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

步骤2 - 查找事件名称

我一直在想事件名称可能是什么。看起来“onmouseover”、“onmousedown”等事件已经被重命名，将“onmouse”部分截断并在末尾添加了“nodes”。

所以对于点击事件，它将是“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 - 所有的都应该是小写字母。

- Olivier Tonglet

---

谢谢。你是怎么找到这些事件名称的？ - Gijs

抱歉回复晚了。我在 Github 上查看了源代码。 - Olivier Tonglet

v1.0.3 版本中的所有事件列表：click（点击）、rightClick（右击）、clickStage（舞台单击）、doubleClickStage（舞台双击）、rightClickStage（舞台右击）、clickNode（节点单击）、clickNodes（多个节点单击）、doubleClickNode（节点双击）、doubleClickNodes（多个节点双击）、rightClickNode（节点右击）、rightClickNodes（多个节点右击）、overNode（鼠标指针移到节点上方）、overNodes（鼠标指针移到多个节点上方）、outNode（鼠标指针从节点移出）、outNodes（鼠标指针从多个节点移出）、downNode（节点按下）、downNodes（多个节点按下）、upNode（节点弹起）、upNodes（多个节点弹起）。 - Matt Jensen

事件名称可能只能使用小写字母。 - Matt Jensen

谢谢提供列表，我已将其添加到答案中。 - Olivier Tonglet

事实上，事件似乎不应该小写，sigmaInstance.bind('clicknode')不起作用，而sigmaInstance.bind('clickNode')起作用。 你确定这个事件列表是正确的吗？我无法理解为什么在1.0.3版本中downNode和upNode似乎不起作用：http://jsfiddle.net/5w2t8azz/ - Flo Schild