# Interactive SVG

**URL:** <https://discuss.ocaml.org/t/interactive-svg/2296>\
**Category:** Learning\
**Tags:** javascript\
**Created:** [July 14, 2018, 8:54pm UTC](https://discuss.ocaml.org/t/interactive-svg/2296 "2018-07-14T20:54:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jnavila](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/jnavila/32/527_2.png) [@jnavila](https://discuss.ocaml.org/u/jnavila)\
**Post date:** [July 14, 2018, 8:54pm UTC](https://discuss.ocaml.org/t/interactive-svg/2296/1 "2018-07-14T20:54:47Z")

</div>

I need to display an SVG which is interactive (i.e. reacts to user inputs on mouse and keyboard). What are the options right now? Neither js\_of\_ocaml nor bucklescript seem to handle correctly events for SVG.

---

<div class="post-metadata">

**Author:** ![mars0i](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/mars0i/32/1058_2.png) [@mars0i](https://discuss.ocaml.org/u/mars0i)\
**Post date:** [July 16, 2018, 5:26am UTC](https://discuss.ocaml.org/t/interactive-svg/2296/2 "2018-07-16T05:26:11Z")

</div>

I wonder whether [bs-d3](https://github.com/af/bs-d3) would be useful. (I’ve used d3, but not with OCaml, and I don’t know anything about this library.)

---

<div class="post-metadata">

**Author:** ![Drup](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/drup/32/35_2.png) [@Drup](https://discuss.ocaml.org/u/Drup)\
**Post date:** [July 16, 2018, 8:30am UTC](https://discuss.ocaml.org/t/interactive-svg/2296/3 "2018-07-16T08:30:46Z")

</div>

I’ve written interactive SVGs with js\_of\_ocaml+tyxml in the past. Events worked just fine. What is the problem exactly?

---

<div class="post-metadata">

**Author:** ![fallbackusername](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/fallbackusername/32/222_2.png) [@fallbackusername](https://discuss.ocaml.org/u/fallbackusername)\
**Post date:** [July 16, 2018, 8:06pm UTC](https://discuss.ocaml.org/t/interactive-svg/2296/4 "2018-07-16T20:06:21Z")

</div>

@mars0i As the author of the bs-d3 bindings, I can say they’re in a pretty limited state at present, and interactivity isn’t really supported yet. That said, it’s pretty easy to add new bindings, so it still might work as a jumping-off point

---

<div class="post-metadata">

**Author:** ![jnavila](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/jnavila/32/527_2.png) [@jnavila](https://discuss.ocaml.org/u/jnavila)\
**Post date:** [July 17, 2018, 5:50am UTC](https://discuss.ocaml.org/t/interactive-svg/2296/5 "2018-07-17T05:50:21Z")

</div>

I’d like to attach actions to some key events much like in the same manner as

> <https://github.com/ocsigen/js_of_ocaml/blob/master/examples/graph_viewer/viewer_js.ml>

but it seems that the part

```ocaml
Html.document##.onkeydown := <...>

```

cannot simply be translated to SVG. And Merlin is not doing magic helping me to find the correct members.

---

<div class="post-metadata">

**Author:** ![jnavila](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/jnavila/32/527_2.png) [@jnavila](https://discuss.ocaml.org/u/jnavila)\
**Post date:** [July 18, 2018, 2:45pm UTC](https://discuss.ocaml.org/t/interactive-svg/2296/6 "2018-07-18T14:45:30Z")

</div>

Can the code be published? Would you happen to have a code snippet of the plumbing of the document events?

---

<div class="post-metadata">

**Author:** ![fallbackusername](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/fallbackusername/32/222_2.png) [@fallbackusername](https://discuss.ocaml.org/u/fallbackusername)\
**Post date:** [July 18, 2018, 5:37pm UTC](https://discuss.ocaml.org/t/interactive-svg/2296/7 "2018-07-18T17:37:00Z")

</div>

@jnavila Not sure if you’ve seen this, there’s also [https://github.com/seliopou/ocaml-d3](https://github.com/seliopou/ocaml-d3). [It appears](https://github.com/seliopou/ocaml-d3/blob/master/lib/d3.ml#L149) at least some interactivity is supported

---

<div class="post-metadata">

**Author:** ![jnavila](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/jnavila/32/527_2.png) [@jnavila](https://discuss.ocaml.org/u/jnavila)\
**Post date:** [July 18, 2018, 7:02pm UTC](https://discuss.ocaml.org/t/interactive-svg/2296/8 "2018-07-18T19:02:15Z")

</div>

The binding is done on the d3 lib, not on the DOM. I’m not sure that this is appliable without d3.