Question

我正在使用带有SVG foreignObject元素实现的HTML节点标签的d3强制定向布局。我想在不同的时间选择这些元素来更新它们的位置和其他属性（并在它们被创建并跟踪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的不寻常性质有关。我如何选择它来在我的代码中操作它？非常感谢。

Answer 1

严格来说，SVG区分大小写，因此您应使用<foreignObject>代替<foreignobject>。

更严重的是，有一个开放的bug in WebKit可以阻止选择camelCase元素。

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

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

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

或者，您可以使用CSS类或ID，然后选择您的元素。鉴于上述各种错误，我会尽可能推荐这种方法。

Answer 2

你应该能够d3.selectAll（“foreignObject”）或svg.selectAll（“foreignObject”）。可能是foreignObject属性中的额外逗号（在x和y之间）。我只使用D3插入了foreignObject元素，所以也许有一些关于嵌入它们的东西是不同的。

无法在d3中选择SVG foreignObject元素

2 个答案: