D3.js D3:can'；t调用svg。在同一个svg对象上选择两次All（“text”）

我认为我对selectAll的理解是错误的

这个jsFiddle应该可以解释这个问题

我创建了一个条形图，如下所示：

svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
            //etc

我添加标签

        svg.selectAll("text")
           .data(labels)
           .enter()
           .append("text")
           .text(function(d) {return d})
            // etc

然后，获取的值应显示在条形图的右端：

        svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
            // etc

问题是最后添加的文本不会添加到父SVG中

---

节点。我认为我对selectAll的理解是不够的…

我已经写了一篇文章解释了selectAll和enter是如何工作的。这将有助于理解这个问题

以下是链接：

如果您想要快速修复，那么如果没有其他元素，则以下操作应该有效 使用html文档中的类

标签

和类

值

：

    svg.selectAll("text.labels")
       .data(labels)
       .enter()
       .append("text")
       .text(function(d) {return d})
        // etc

    svg.selectAll("text.values")
       .data(dataset)
       .enter()
       .append("text")
        // etc

---

我没有时间尝试修复JSFIDLE，但我认为如果将文本分成两组，就可以解决问题。我认为问题在于，现在您告诉D3根据一个数据集关联并附加所有文本，然后告诉它将所有文本附加到另一个数据集。这是矛盾的，所以我认为它忽略了第二个数据集。如果您将其分为两组，它应该能够正确地将组中的所有文本分配给数据集。此外，我发现本文非常有助于了解select all声明的具体情况：选择器“text”不够具体。第二次使用选择器时，它将选择所有现有的标签文本元素，并与这些元素执行数据联接。常用的方法是使用类使选择器更具体：在我所看到的所有示例中，

selectAll（）

仅按节点名称进行选择，但是让select函数更具体地使用上面的示例中的类名，这就更干净了。想知道为什么大多数教程没有提到这一点。