Can I make a Digraph node interactive

I want a custom JS script to execute when I click on a node?

1 Like

There actually used to be attributes to emit driver-dependent code. I’m pretty sure I wrote this. I’m pretty sure someone else removed to improve security. Your best option may be to postprocess the output of the native SVG renderer to insert whatever JS actions you need.

IMO your best bet is to:

  • output to SVG
  • use a class attribute to add a class to the generated node SVG element
  • in javascript, select that class attribute and add whatever onclick handler you want

e.g.

digraph G {
my_node [class="clicky"];
}

in JS:

document.querySelector('.clicky').onclick = function () {
handle the click...
}

If you use d3 then the following will attach a click event to every node:

 d3
    .select("svg")    //  Or change to #id of your hosting SVG node
    .selectAll(".node")
    .on("click", evt => console.log("Hello and welcome!"))
;