d3.js - 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