13
'da SVG foreignObject öğesi seçilemiyor SVG foreignObject öğeleriyle uygulanan HTML düğüm etiketleri olan d3 zorla yönlendirilmiş bir düzen ile çalışıyorum. Bu elemanları konumlarını ve diğer özelliklerini güncellemek için çeşitli zamanlarda seçmek istiyorum (ve bunlar oluşturulduğu ve ve exit() ile destoryed olarak izledikleri gibi), ancak diğer SVG öğeleri gibi onları seçebiliyorum gibi görünmüyor .d3
İşte kompakt örnektir:
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: Bu kadar http://bl.ocks.org/3217448 de de
function run() {
svg = d3.select("#example_svg");
console.log(svg.selectAll("circle"));
console.log(svg.selectAll("foreignObject"));
}
. Konsol çıktısı: ikinci bir boş iken birinci dizi circle elemanı içeren
[Array[1]]
[Array[0]]
. circle nesnesi neden seçilebilir, ancak foreignObject değil? foreignObject'un alışılmadık doğası ile ilgili olduğunu varsayıyorum. Kodumda işlemek için onu nasıl seçerim? Çok teşekkürler.
(Ek virgül yazım hatalarını kaldırmak için güncelleştirildi) –