This page exists for two reasons: Test of the existing events in APEX for the
plugin development and showing you implementation examples.

12 events are available:

• Node Mouse Enter
• Node Mouse Leave
• Node Click
• Node Double Click
• Node Contextmenu
• Link Click
• Lasso Start
• Lasso End
• Force Start
• Force End
• Render End
• Resize

You can access the events in two ways:

1. Configure event functions...
   • ...in the graph region attributes
   • ...or by using the API methods to configure the event functions on runtime
2. Use the APEX dynamic actions to access the graph events

Function example for a node click event:

function(event, data) {
  console.log( 
    "Test Event Function - Node Click - event:",
    event
  );
  console.log( 
    "Test Event Function - Node Click - data:",
    data
  );
  console.log(
    "Test Event Function - Node Click - this:",
    this
  );
}

APEX dynamic action example on the component event "Node Click [D3 - Force
Layout]"

console.log( 
  "Test Dynamic Action - Node Click - event:",
  this.browserEvent
);
console.log( 
  "Test Dynamic Action - Node Click - data:",
  this.data
);
console.log( 
  "Test Dynamic Action - Node Click - this:",
  this.triggeringElement
);

Please refer also to the APEX dynamic action documentation and keep in mind,
that the data is the same in both ways but the event differs, because APEX
dynamic actions providing a jQuery event and the registered event functions the
original D3 events.

By interacting with the graph you can test here the registered event functions.

Mouse enter and mouse leave events are only logged to the console. The Lasso can be started with pressed shift or alt key, because the zoom mode is switched on. To click a link is not so easy, because the links are so narrow. Please zoom into the graph - this helps :-). Selflinks are much easier to click, because the whole area of a selflink is clickable (selflinks are rendered as a path instead of a line, try it out by clicking the selflink on the node “King”).

Please refer also to the browser console, because the serialized text versions in the “Event” and “This” items differs from the view in your browser console, which is more correct and relevant. If you need to program against the events or the this references than the console is your friend :-)

Filter the output of your console for “Test Event Function” or “Test Dynamic Action”, because the debug mode is also switched on for the graph and therefore you get many entries in the console.

By interacting with the graph you can test here the registered dynamic actions.

Mouse enter and mouse leave events are only logged to the console. The Lasso can be started with pressed shift or alt key, because the zoom mode is switched on. To click a link is not so easy, because the links are so narrow. Please zoom into the graph - this helps :-). Selflinks are much easier to click, because the whole area of a selflink is clickable (selflinks are rendered as a path instead of a line, try it out by clicking the selflink on the node "King").

Please refer also to the browser console, because the serialized text versions in the “Event” and “This” items differs from the view in your browser console, which is more correct and relevant. If you need to program against the events or the this references than the console is your friend :-)

Filter the output of your console for “Test Event Function” or “Test Dynamic Action”, because the debug mode is also switched on for the graph and therefore you get many entries in the console.