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