CODEWITHSUNDEEP
d3.js
Boutran
Boutran

Reputation: 10124

D3 : can't call svg.selectAll("text") twice on a same SVG object

I think my understanding of selectAll is wrong,

This jsFiddle should explain the problem

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

I have create a bar chart like follows : 

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

I add labels

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

then values that get should be displayed at the right end of the bars :

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

The problem is that the last addition of texts don't get added to the parent SVG node. I think my understanding of selectAll is deficient ...

Upvotes: 11

Views: 9791

Answers (1)

Curious2learn
Curious2learn

Reputation: 33628

I have written a post explaining how selectAll and enter works. It will help in understanding the issue.

Here is the link: http://knowledgestockpile.blogspot.com/2012/01/understanding-selectall-data-enter.html?m=1

If you want a quick fix, the following should work if there are no other elements with the class labels and class values in your html document:

    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

Upvotes: 22

Related Questions