关于d3.js selectAll的困惑

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>

我想选择“节点输入”类，所以我这样做了：

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

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

Answer 1

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

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

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

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

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

Answer 2

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

另外一个问题是，你不需要select元素的您要事先选择父母。 相反，您可以直接select该元素，例如

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

请注意，由于您选择的是单个元素，因此只能使用d3.select 。 通常，如果多个元素符合选择条件，它将仅返回第一个，但是在这种情况下，您知道只有一个这样的匹配。