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=".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 . 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.
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.
- (Updated to remove extra comma typo) – Ryan Gabbard Commented Jul 31, 2012 at 15:45
2 Answers
Reset to default 18Strictly 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.
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.