Question

我的HTML看起来像这样：

<svg height="680" width="650">

<g transform="translate(20,20)">
    <g class="zoom">
        <g class="edgePaths"></g>
        <g class="edgeLabels"></g>
        <g class="nodes">
            <g class="node enter" style="opacity: 1;" transform="translate(216.1875,16.5)"></g>
        </g>
    </g>
</g>
</svg>

我想选择＆＃34;节点输入＆＃34;上课，所以我这样做了：

node = d3.selectAll("svg").selectAll("g").selectAll("node enter")

它没有返回正确的元素。对我做错了什么建议？

Answer 1

您的上一个选择器正在尝试查找<node enter></node enter>元素。

类的选择器使用点前缀，例如".node"。

在您的示例中，您可以使用：

nodes = d3.selectAll(".node.enter");

您可以阅读有关CSS选择器here的更多信息。

Answer 2

您遇到的主要问题是类的选择器使用点（'.'）前缀（请参阅@ Oleg的答案）。

另一个问题是您不需要select预先尝试选择的元素的父级。相反，您可以直接select该元素，例如

d3.select("g.node.enter")

请注意，由于您选择的是单个元素，因此您只需使用d3.select即可。一般来说，如果多个元素与选择标准匹配，它将只返回第一个，但在这种情况下，你知道只有一个这样的匹配。

关于d3.js selectAll的困惑

2 个答案: