Add buttons to svg-object with javascript

Question

I'm building a graph in javascript using nvd3 and need to add a couple of custom buttons.

using d3 I only seem to have an append-object. In my current setup, self.selector is a svg-element.

d3.select(self.selector).insert("button")

I consider a few options:

• Target self.selectors parent and insert html-elements for toggling that way.
• Target the svg and insert some kind of svg-buttons that I could access using javascript.
• Use some other native js method to insert the hmtl-elements I want before the svg.

Are there any pro:s or cons with any of theese methods? I don't use jQuery in this project.

Answer 1

I would recommend adding SVG shapes, style them with CSS to look like the buttons you want and register and event listener. That works fine and is the cleanest approach.

Answer 2

You cannot add HTML button elements to SVG, the SVG containers (svg and g) cannot hold buttons. You can add foreignObject to an SVG canvas (or g element) which can hold buttons but svg:foreignObject is not supported in IE.