2012-07-31 4 views
13

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의 비정상적인 성격과 관련이 있다고 가정합니다. 내 코드에서 그것을 조작하려면 어떻게 선택해야합니까? 매우 감사합니다.

+0

(쉼표로 오타를 제거하도록 업데이트 됨) –

답변

19

엄밀히 말하면 SVG는 대소 문자를 구분하므로 <foreignobject> 대신 <foreignObject>을 사용해야합니다.

더 심각하게도 camelCase 요소를 선택하지 못하도록 열려있는 bug in WebKit이 있습니다. ; 또는

을, 당신은 CSS 클래스 또는 ID를 사용할 수 있습니다

.selectAll(function() { return this.getElementsByTagName("foreignObject"); }) 

(. 지금은 폐쇄 WebKit bug 46800 볼이 비록 오래된 웹킷 버전에서 작동하지 않을 수 있습니다) :

한 가지 가능한 해결 방법은 사용하는 것입니다 그런 방식으로 요소를 선택하십시오. 앞서 언급 한 다양한 버그를 고려해 가능한 한이 방법을 권장합니다.

+2

대단히 고마워요. 버그라는 것을 알면 기분이 나아졌습니다. :-) 나는 단지 클래스 선택을 해결 방법으로 사용할 것이다. –

+0

"Uncaught SyntaxError : 쿼리를 실행하지 못했습니다 : '[object NodeList]'이 (가) 유효한 선택자가 아닙니다." d3.selectAll (document.getElementsByTagName ("foreignObject"))을 사용할 때. 그러나 클래스 이름으로 선택하면 완벽하게 작동합니다. 감사. Chrome 31의 버그 인 것 같습니다. –

+0

사실 제안 된 해결 방법에 버그가있었습니다. 선택 영역의 모든 요소에 대해 호출되는 함수를 사용하도록 업데이트했습니다. 내 원래 제안은 d3.selectAll에만 적용되었으며 selection.selectAll에는 적용되지 않았습니다. –

-2

d3.selectAll ("foreignObject") 또는 svg.selectAll ("foreignObject") 할 수 있어야합니다. foreignObject 속성 (x와 y 사이)에 여분의 쉼표가있을 수 있습니다. 나는 D3를 사용하여 foreignObject 요소를 삽입 했으므로 다른 것들을 삽입하는 것과 관련하여 뭔가있을 수 있습니다.

관련 문제