无法在d3中选择SVG foreignObject元素

Question

无法在d3中选择SVG foreignObject元素

Rya*_*ard 13 javascript svg d3.js force-layout

我正在使用带有SVG foreignObject元素实现的HTML节点标签的d3强制定向布局.我想选择在不同的时间这些元素来更新自己的位置和其他属性(和跟踪他们,因为他们是创建和destoryed 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>

Run Code Online (Sandbox Code Playgroud)

使用Javascript:

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

Run Code Online (Sandbox Code Playgroud)

这也是http://bl.ocks.org/3217448.控制台输出是:

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

Run Code Online (Sandbox Code Playgroud)

第一个数组包含circle元素,第二个数组为空.为什么circle对象可以选择,但foreignObject不是？我认为这与它的不寻常性质有关foreignObject.我如何选择它来在我的代码中操作它？非常感谢.

Answer 1

Jas*_*ies 19

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

更严重的是,WebKit中存在一个开放的错误,可以防止选择camelCase元素.

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

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

Run Code Online (Sandbox Code Playgroud)

(但这可能不适用于较旧的WebKit版本;请参阅现已关闭的WebKit错误46800.)

或者,您可以使用CSS类或ID,然后选择您的元素.考虑到各种上述错误,我会尽可能推荐这种方法.

非常感谢 - 知道这是一个错误让我感觉更好.:-)我只是使用类选择作为解决方法. (2认同)

归档时间：	13 年，2 月前
查看次数：	5522 次
最近记录：	11 年，3 月前