Question

我对导致DOM异常的原因感到茫然。我能找到的很少的东西是它与无效的选择器有关吗？

背景：

我们有一个散点图，它是一个SVG对象，里面有很多圆圈。

当您将鼠标悬停在某个圈子上时，我们希望能够访问它所代表的数据以显示工具提示。

目前我们正在通过骨干网监听事件（分散图表属于更大的应用程序），因此我们可以通过e.currentTarget访问当前目标的元素节点。

在第一关，我们只是做了

d3.select(e.currentTarget) // from here we can access the datum() method

但是因为我们现在想要使用VML兼容层r2d3，需要注意的是，如果我们想要在SVG中选择元素，我们必须从svg中选择。

SVG元素的查询必须来自SVG节点。示例使用svg.select（'rect'）NOT d3.select（'rect'）

我们可以在悬停事件中通过this.svg访问D3包装的SVG元素。但是当我打电话时：

this.svg.select(e.currentTarget)

我得到了一个DOM例外12。

Uncaught Error: SYNTAX_ERR: DOM Exception 12
    d3_select d3.v2.js:3578
    (anonymous function) d3.v2.js:372
    d3_selectionPrototype.select d3.v2.js:3606
    Backbone.View.extend.mouseEnterBin graph.js:828
    jQuery.each.jQuery.event.special.(anonymous function).handle jquery-1.7.2.js:3616
    jQuery.event.dispatch jquery-1.7.2.js:3332
    jQuery.event.add.elemData.handle.eventHandle

当我在尝试选择之前添加debugger;行时，我能够使用this.svg.selectAll（'circle'）并确认该集合中存在节点e.currentTarget。

感谢你的时间，感谢任何建议或帮助。

Answer 1

selection.select(selector)中的selector参数必须是字符串（例如'circle'）或函数。在您的情况下，它似乎是一个DOM节点。

请参阅https://github.com/mbostock/d3/wiki/Selections#wiki-select：

对于当前选择中的每个元素，选择第一个元素   与指定的选择器字符串匹配的descendant元素。 ...

也可以将选择器指定为返回的函数   element，如果没有匹配元素，则返回null。 ...

如果您有权访问节点，可以使用d3.select(node)（https://github.com/mbostock/d3/wiki/Selections#wiki-d3_select)将其转换为d3选择。

从您的描述中，您似乎只想从e.currentTarget创建D3选择;所以d3.select(e.currentTarget)就足够了。

从具有节点作为参数的SVG中选择会抛出DOM异常12

1 个答案: