Ich arbeite mit einem d3-Zwangslayout mit HTML-Knotenbeschriftungen, die mit SVG foreignObject-Elementen implementiert wurden. Ich möchte diese Elemente zu verschiedenen Zeiten auswählen, um ihre Positionen und andere Eigenschaften zu aktualisieren (und verfolgen sie, wie sie erstellt und mit und exit() destoryed), aber ich kann sie nicht wie andere SVG-Elemente auswählen .Ich kann kein SVG-Element foreignObject in d3 auswählen
Hier ist ein kompaktes Beispiel:
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"));
}
Dies auch bei http://bl.ocks.org/3217448 oben ist. Die Konsole Ausgabe ist:
[Array[1]]
[Array[0]]
wobei das erste Array den circle Element enthält, während der zweite leer ist. Warum ist das circle Objekt auswählbar, aber das foreignObject ist nicht? Ich nehme an, es hat mit der ungewöhnlichen Natur der foreignObject zu tun. Wie würde ich es auswählen, um es in meinem Code zu manipulieren? Vielen Dank.
(aktualisiert, um zusätzliches Komma Tippfehler zu entfernen) –