Tôi đang làm việc với bố cục hướng lực d3 với nhãn nút HTML được triển khai với các phần tử SVG foreignObject. Tôi muốn chọn các phần tử này vào các thời điểm khác nhau để cập nhật vị trí và các thuộc tính khác (và theo dõi chúng khi chúng được tạo và định vị với enter() và exit()), nhưng dường như tôi không thể chọn chúng như các phần tử SVG khác .Không thể chọn phần tử SVG foreignObject trong d3
Dưới đây là một ví dụ nhỏ gọn:
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"));
}
Đây cũng là tại http://bl.ocks.org/3217448. Đầu ra của bàn điều khiển là:
[Array[1]]
[Array[0]]
trong đó mảng đầu tiên chứa phần tử circle trong khi ô thứ nhất chứa phần tử thứ hai trống. Tại sao đối tượng circle có thể chọn, nhưng foreignObject thì không? Tôi cho rằng nó phải liên quan đến bản chất bất thường của foreignObject. Làm cách nào để chọn nó để thao tác nó trong mã của tôi? Cảm ơn rất nhiều.
(Đã cập nhật để xóa thêm dấu phẩy) –