score:1

Accepted answer

You forgot to set the x and y positions of the text elements:

//text to show
elementGroup.append("text")
    .attr("text-anchor", "middle")
    .attr("x", function(d,i){return i*80+40;}
    .attr("y", h/2)     
    .text(function(d) {
        return parseInt(d);
     })
    .classed('tweet-number', true);

Here is your CodePen: http://codepen.io/anon/pen/mOyrMM

The <g> element wrap its content and autosize according to the contents, but it doesn't position the contents.

That being said, an alternative is using translate to the groups, and not setting any position for the texts or the circles:

elementGroup.attr("transform", function(d,i){
    return "translate(" + (i*80+40) + "," + h/2 + ")"; 
});

The result is the same, check the CodePen: http://codepen.io/anon/pen/yVyVYy


Related Query