無法在d3中選擇SVG foreignObject元素

我正在使用d3強制導向佈局，其中使用SVG foreignObject元素實現了HTML節點標籤。我希望在不同的時間選擇這些元素來更新他們的位置和其他屬性（並跟蹤它們的創建和刪除，其中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>

的Javascript：

function run() { 
    svg = d3.select("#example_svg"); 
    console.log(svg.selectAll("circle")); 
    console.log(svg.selectAll("foreignObject")); 
}

這也是在向上http://bl.ocks.org/3217448。控制檯輸出是：

[Array[1]] 
[Array[0]]

其中第一陣列包含circle元件，而第二個是空的。爲什麼circle對象可以選擇，但foreignObject不是？我認爲這與foreignObject的不同尋常的性質有關。我如何選擇它來在我的代碼中操作它？非常感謝。

來源

2012-07-31 Ryan Gabbard

（更新刪除額外的逗號錯字） – 2012-07-31 15:45:17

嚴格地說，SVG區分大小寫，因此您應該使用<foreignObject>而不是<foreignobject>。

更嚴重的是，有一個開放的bug in WebKit，它阻止選擇駝峯元素。

一個可能的解決方法是使用：

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

（這可能不工作，雖然在舊的WebKit的版本;看到現已關閉WebKit bug 46800。）

或者，你可以使用CSS類或ID然後選擇你的元素。考慮到上述各種錯誤，如果可能的話，我會在此刻推薦此方法。

來源

2012-07-31 15:32:54

非常感謝 - 知道這是一個錯誤讓我感覺更好。 :-)我只會使用類選擇作爲解決方法。 – 2012-07-31 15:44:40

我收到錯誤「Uncaught SyntaxError：無法執行查詢：'[object NodeList]'不是有效的選擇器。」當使用d3.selectAll（document.getElementsByTagName（「foreignObject」））時。但按類名選擇完美。謝謝。它似乎仍然是Chrome 31中的一個bug。 – 2013-12-11 16:25:52

其實，我建議的解決方法中存在一個錯誤。我已經更新它來使用爲選擇的每個元素調用的函數。我原來的建議只適用於d3.selectAll，而不是selection.selectAll。 – 2013-12-12 13:05:50

-2

你應該能夠d3.selectAll（「foreignObject」）或svg.selectAll（「foreignObject」）。這可能是你foreignObject屬性中的額外逗號（在x和y之間）。我只使用D3插入foreignObject元素，所以也許有一些關於像這樣嵌入它們的不同之處。

來源

2012-07-31 15:27:19 Elijah

無法在d3中選擇SVG foreignObject元素

回答

相關問題