Cannot select SVG foreignObject element in d3

Question

I\'m working with a d3 force-directed layout with HTML node labels implemented with SVG foreignObject elements. I\'d like to select these elements at various times

Answer 1

Strictly speaking, SVG is case sensitive so you should use <foreignObject> instead of <foreignobject>.

More seriously though, is that there's an open bug in WebKit that prevents camelCase elements from being selected.

One possible workaround is to use:

.selectAll(function() { return this.getElementsByTagName("foreignObject"); })

(This may not work in older WebKit versions though; see the now-closed WebKit bug 46800.)

Alternatively, you can use CSS classes or IDs and select your elements that way instead. I would recommend this approach at the moment if possible, given the various aforementioned bugs.

Answer 2

You should be able to d3.selectAll("foreignObject") or svg.selectAll("foreignObject"). It may be that extra comma in your foreignObject attributes (between x and y). I've only inserted foreignObject elements using D3, so perhaps there's something about embedding them like this that's different.