Menu
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 to update their positions and other properties (and track them as they are created and destoryed with enter() and exit() ), but I don't seem to be able to select them like other SVG elements.
Here is a compact example:
HTML:
<html>
<head>
<title>Cannot Select SVG Foreign Object</title>
<script src="http://d3js.org/d3.v2.js"></script>
<script src = "fo_select.js"></script>
</head>
<body>
<svg id="example_svg" width="600" height="600">
<g>
<circle r="40" cx = "80" cy="80"></circle>
<foreignObject width = "100" height = "100" x = "200" y="200">
<body>Hello, world</body>
</foreignObject>
</g>
</svg>
<script>run()</script>
</body>
</html>
Javascript:
function run() {
svg = d3.select("#example_svg");
console.log(svg.selectAll("circle"));
console.log(svg.selectAll("foreignObject"));
}
This is also up at http://bl.ocks.org/3217448 . The console output is:
[Array[1]]
[Array[0]]
where the first array contains the circle element, while the second one is empty. Why is the circle object selectable, but the foreignObject is not? I assume it has to do with the unusual nature of the foreignObject. How would I select it to manipulate it in my code? Thanks very much.
342
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.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
