从以节点为参数的SVG中进行选择将引发DOM异常12

Selecting from SVG with node as argument throws DOM Exception 12

本文关键字：选择 DOM 异常 行选 节点 参数 SVG      更新时间：2023-09-26

我不知道是什么原因导致了DOM异常12。我能找到的是它与无效选择器有关?

背景:

我们有一个散点图，它是一个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 Exception。

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确实存在于该集合中。

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

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

看到https://github.com/mbostock/d3/wiki/Selections wiki-select:

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

的后代元素。

选择器也可以指定为返回一个元素，如果没有匹配的元素，则为null . ...

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

从你的描述，似乎你只是想从e.c urcurrenttarget创建一个D3选择;所以d3.select(e.currentTarget)就足够了。

相关文章：