13

我正在使用 d3 强制导向布局，其中包含使用 SVGforeignObject元素实现的 HTML 节点标签。我想在不同时间选择这些元素以更新它们的位置和其他属性（并在使用enter()and创建和销毁它们时跟踪它们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. 我将如何选择它来在我的代码中操作它？非常感谢。

4

2 回答 2

19

严格来说，SVG 是区分大小写的，所以你应该<foreignObject>使用<foreignobject>.

更严重的是，WebKit中有一个开放的错误会阻止选择 camelCase 元素。

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

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

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

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

于 2012-07-31T15:32:54.493 回答
-1

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

于 2012-07-31T15:27:19.003 回答