8

I have a very simple example in sigma.js that reads a gexf-file with some additional data. 

// 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. Can anyone tell me a proper way to do this?

4

2 に答える 2

11

公式ドキュメントによると：

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

（受け入れられた答えは私にはうまくいきませんでした。）

于 2015-06-30T21:32:52.560 に答える
7

ステップ1-イベントハンドラーの作成

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

ステップ2-イベント名を見つける

私はしばらくの間、イベント名が何であるか疑問に思っていました。「onmouseover」、「onmousedown」などの名前が変更され、「onmouse」の部分が切り捨てられ、最後に「nodes」が追加されたようです。

したがって、クリックイベントの場合は「ダウンノード」になります

ステップ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-すべて小文字にする必要があります。

于 2013-03-23T17:50:49.580 に答える