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 instead of .

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.