无法在 d3 中选择 SVG foreignObject 元素答案

【问题标题】：Cannot select SVG foreignObject element in d3无法在 d3 中选择 SVG foreignObject 元素
【发布时间】：2012-07-29 09:05:49
【问题描述】：

我正在使用 d3 强制导向布局，其中 HTML 节点标签使用 SVG foreignObject 元素实现。我想在不同时间选择这些元素以更新它们的位置和其他属性（并在使用 enter() 和 exit() 创建和销毁它们时跟踪它们），但我似乎无法选择它们像其他 SVG 元素一样。

这是一个简洁的例子：

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 的不寻常性质有关。我将如何选择它来在我的代码中操作它？非常感谢。

【问题讨论】：

（已更新以删除多余的逗号错字）

标签： javascript svg d3.js force-layout

【解决方案1】：

严格来说，SVG 区分大小写，因此您应该使用<foreignObject> 而不是<foreignobject>。

更严重的是，有一个开放的bug in WebKit 会阻止选择驼峰式元素。

一种可能的解决方法是使用：

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

（不过，这可能不适用于较旧的 WebKit 版本；请参阅现已关闭的 WebKit bug 46800。）

或者，您可以使用 CSS 类或 ID 并以这种方式选择您的元素。考虑到前面提到的各种错误，如果可能的话，我现在会推荐这种方法。

【讨论】：

非常感谢 - 知道这是一个错误让我感觉好多了。 :-) 我将使用类选择作为解决方法。
我收到错误“Uncaught SyntaxError: Failed to execute query: '[object NodeList]' is not a valid selector.”使用 d3.selectAll(document.getElementsByTagName("foreignObject")) 时。但是按类名选择效果很好。谢谢。它似乎仍然是 Chrome 31 中的一个错误。
实际上，我建议的解决方法中有一个错误。我已将其更新为使用为选择的每个元素调用的函数。我最初的建议仅适用于 d3.selectAll，而不适用于 selection.selectAll。
一年前提交了一个补丁。在 WebKit 中修复它时不要屏住呼吸。

【解决方案2】：

您应该可以使用 d3.selectAll("foreignObject") 或 svg.selectAll("foreignObject")。可能是您的 foreignObject 属性中的额外逗号（在 x 和 y 之间）。我只使用 D3 插入了 foreignObject 元素，所以也许像这样嵌入它们是不同的。

【讨论】：