D3.js 如何从DOM元素本身创建选择

在d3.js中，如果给我一个唯一标识DOM元素的CSS选择器，我可以创建一个只包含该元素的选择，例如

svg.selectAll("g.node#"+d.id)

假设我得到了DOM元素本身，例如，一个已经存在的特定元素。将DOM元素直接传递给selectAll或select会生成一个错误，报告为SyntaxError:在Firefox中指定了无效或非法的字符串，或未捕获的SyntaxError:未能在“元素”上执行“querySelectorAll”：“[object SvggeElement]”在Chrome中不是有效的选择器

如何从对DOM元素本身的引用中创建选择？不需要让D3使用CSS选择器去搜索元素

目前，我已经有了工作代码，可以通过构造一个唯一的CSS选择器来获得适当的选择，但这似乎是不必要的工作，因为我已经有了一个对DOM元素的引用，我想在其中添加一些东西

编辑：

多亏了@meetamit和@LarsKotthoff：好吧，如果在DOM元素上选择all就行了，那么我的代码有一些我不理解的地方，这并不奇怪。我试图避免在我的SO问题中转储大量代码，但我不知道还能做什么。这是一本书。它没有在JSFIDLE中运行，我也不知道为什么，但在Firefox、Chrome和Safari中没有JSFIDLE，它运行得很好。这是一个在HTML窗口中包含我的整个文件的示例

我的代码应该向force布局中的每个节点添加一个小的包布局。可能有一种纯粹惯用的方法可以做到这一点，但我只是通过在force布局中的节点上调用每个节点，从一个单独的函数中添加包布局，才成功地使其工作：

var svgnodes = svg.selectAll("g.node")
    .data(data.nodes, function (d) {return d.id;})
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("id", function (d) {return d.id;})
    .call(layout.drag())
    .on("click", click);

svgnodes.each(function (d, i) {addPersonCircles(d, svg, this);});

下面是addPersonCircles的部分定义：

当我添加console.logpersonG时，即显示每个控制台的内部，显示的内容如下：

<g class="node" id="sandra" transform="translate(263.59494561798255,242.1803122208288)">...</g>

我有时对它所指的内容感到困惑，但这里它似乎指的是DOM节点，而不是其他。但是，当我用svg.selectAllpersonG替换svg.selectAllg.node+d.id时，我会收到上面报告的错误消息。结果如下所示。谢谢你的帮助

---

可以使用D3.select将DOM节点转换为D3选择。不能使用selection.selectAll将DOM节点转换为D3选择。你想要的代码是

d3.select(personG) 
    .selectAll("circle.person")  // create new circles within g node
    // ...

请注意两点：

该语句的根是全局d3。不是选择svg。 使用select not selectAll进行选择

---

Meetamit完全正确。

您可以使用以下方法将单个DOM节点转换为D3选择：

如果选择器不是字符串，则选择指定的节点；如果您已经有对节点的引用，例如在事件侦听器中的引用或全局引用（例如document.body），这将非常有用

此外，您可以使用以下方法将DOM节点数组转换为d3选择：

如果选择器不是字符串，则选择指定的节点数组；如果您已经有对节点的引用，例如this.childNodes，则此选项非常有用

---

svg.selectAll'g'。或者例如svg.selectAll'rect'使用CSS选择器@agconti。我已经知道怎么做了。给定一个dom元素el，您可以调用d3.selectel并获得一个有效的选择。如果这不起作用，那么其他的东西就错了，比如可能el实际上不是一个DOM元素，而是另一个d3选择或jQuery选择器或其他东西。从错误消息中，听起来好像您试图使用多个元素的数组，而不是单个元素。@Mars这是引用DOM元素。太好了。这很有效。谢谢你的解释。是的，我误解了@meetamit意味着我必须使用这种形式。为什么那个方法，而且只有那个方法有效，而不是你答案中列出的其他选项，以及为什么在其他情况下，当在d3上调用select时，我在我的。。。。当我开始探索d3之路时，我把这些问题留给了未来-这是一个很好的起点，第一点似乎与@StephenThomas两年多前所写的相同。第二点与他写的东西相矛盾，但没有解释该怎么做；它的select用于单个节点，selectAll用于节点数组。它们不能互换使用。我只是想说清楚。干杯

d3.select(personG) 
    .selectAll("circle.person")  // create new circles within g node
    // ...