D3：不能在同一个SVG对象上调用svg.selectAll（“text”）两次

Question

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

这个jsFiddle应该解释这个问题

http://jsfiddle.net/maxl/JY4hq/2/

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

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的理解不足......

Answer 1

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

以下是链接：http://knowledgestockpile.blogspot.com/2012/01/understanding-selectall-data-enter.html?m=1

如果您想要快速修复，如果没有其他元素，则以下内容应该有效 在html文档中使用类labels和类values：

    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