CODEWITHSUNDEEP
javascriptd3.js
Uthman
Uthman

Reputation: 9807

Why is label not getting added to all my paths?

Plunker: https://next.plnkr.co/edit/17t5ujwC71IK3PCi

Why is following not adding a "test" label to all my polygons?

 /* NOT Working code */
 groups.selectAll('.path_placeholder')
   .enter()
   .append('text')
   .text("test")

Update

.enter() wasn't required as mentioned by Xavier. Removing it showed "test" for all nodes. But why then its not working when I do provide data and use enter() as following:

groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) { 
      return d; 
      })
    .enter()
    .append('text')
    .text(function(d){
      console.log(d);
      return d;
    })

I am trying to be able to show label for each of my polygon and for now just trying to add a dummy label to each of them.

Upvotes: 1

Views: 33

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Your problem here is the paths is a <path> selection, not a <g> one:

paths = groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) { return +d; })
    .enter()
    .append('g')
    .attr('class', 'path_placeholder')
    .append('path')//this makes the selection pointing to <path> elements
    .attr('stroke', function(d) { return color(d); })
    .attr('fill', function(d) { return color(d); })
    .attr('opacity', 0);

Because of that, when you do...

groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) { 
        return d; 
    })
    .enter()
    //etc...

... your "enter" selection is empty, because you already have data associated to that paths selection.

Besides that, it makes little sense using a proper "enter" selection for the texts, since the data is the same data bound to the groups.

Solution: the solution here, which is the idiomatic D3 for this situation, is creating an actual <g> selection.

We can do that by breaking the paths selection, and giving it another name:

pathGroups = groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) {
        return +d;
    })
    .enter()
    .append('g')
    .attr('class', 'path_placeholder');

Then you can just do:

paths = pathGroups.append('path')
    .attr('stroke', function(d) {
        return color(d);
    })
    .attr('fill', function(d) {
        return color(d);
    })
    .attr('opacity', 0)

texts = pathGroups.append('text')
    .text(function(d) {
        return d;
    });

Here is the forked Plunker: https://next.plnkr.co/edit/31ZPXIvSI287RLgO

Upvotes: 2

Related Questions