无法在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元素

回答

相关问题