SVN foreignObject
요소로 구현 된 HTML 노드 레이블이있는 d3 강제 지정 레이아웃으로 작업하고 있습니다. 이 요소들을 다양한 시점에 선택하여 위치 및 기타 속성을 업데이트하고 (enter()
및 exit()
으로 생성되고 소멸되는대로 추적 함) 다른 SVG 요소처럼 선택할 수없는 것 같습니다. .d3에서 SVG foreignObject 요소를 선택할 수 없습니다
여기에 컴팩트 한 예입니다
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>
자바 스크립트 :이가 http://bl.ocks.org/3217448에서 또한
function run() {
svg = d3.select("#example_svg");
console.log(svg.selectAll("circle"));
console.log(svg.selectAll("foreignObject"));
}
. 콘솔 출력은 : 두 번째가 비어있는 동안 제 배열의 요소를 포함 circle
[Array[1]]
[Array[0]]
. circle
개체를 선택할 수 있지만 foreignObject
개체가 선택되지 않는 이유는 무엇입니까? 나는 이것이 foreignObject
의 비정상적인 성격과 관련이 있다고 가정합니다. 내 코드에서 그것을 조작하려면 어떻게 선택해야합니까? 매우 감사합니다.
(쉼표로 오타를 제거하도록 업데이트 됨) –