# Can I make a Digraph node interactive

**URL:** <https://forum.graphviz.org/t/can-i-make-a-digraph-node-interactive/503>\
**Category:** Help\
**Created:** [January 11, 2021, 4:32pm UTC](https://forum.graphviz.org/t/can-i-make-a-digraph-node-interactive/503 "2021-01-11T16:32:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![oliver\_reid](https://avatars.discourse-cdn.com/v4/letter/o/aca169/32.png) [@oliver\_reid](https://forum.graphviz.org/u/oliver_reid)\
**Post date:** [January 11, 2021, 4:32pm UTC](https://forum.graphviz.org/t/can-i-make-a-digraph-node-interactive/503/1 "2021-01-11T16:32:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\
**Post date:** [January 12, 2021, 2:19am UTC](https://forum.graphviz.org/t/can-i-make-a-digraph-node-interactive/503/2 "2021-01-12T02:19:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/mark/32/84_2.png) [@mark](https://forum.graphviz.org/u/mark)\
**Post date:** [January 13, 2021, 5:14am UTC](https://forum.graphviz.org/t/can-i-make-a-digraph-node-interactive/503/3 "2021-01-13T05:14:46Z")

</div>

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.

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

```

in JS:

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

```

---

<div class="post-metadata">

**Author:** ![schmoo2k](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/schmoo2k/32/29_2.png) [@schmoo2k](https://forum.graphviz.org/u/schmoo2k)\
**Post date:** [January 13, 2021, 3:30pm UTC](https://forum.graphviz.org/t/can-i-make-a-digraph-node-interactive/503/4 "2021-01-13T15:30:30Z")

</div>

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

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

```