How to display names next to bubbles in d3js motion chart


In Mike Bostocks example http://bost.ocks.org/mike/nations/ there is so much data that putting the names of the countries there would make it chaotic, but for a smaller project I would like to display it.

enter image description here

I found this in the source:

var dot = svg.append("g")
  .attr("class", "dots")
.selectAll(".dot")
  .data(interpolateData(2004))
.enter().append("circle")
  .attr("class", "dot")
  .style("fill", function(d) { return color(d); })
  .text(function(d) { return d.name; })
  .call(position)
  .sort(order);

dot.append("title")
  .text(function(d) { return d.name; });

But somehow a title never shows up. Does anybody have an idea, how to display the name, next to the bubble?


Answers:


As the other answer suggests, you need to group your elements together. In addition, you need to append a text element -- the title element only displays as a tooltip in SVG. The code you're looking for would look something like this.

var dot = svg.append("g")
             .attr("class", "dots")
             .selectAll(".dot")
             .data(interpolateData(2004))
             .enter()
             .append("g")
             .attr("class", "dot")
             .call(position)
             .sort(order);
dot.append("circle")
   .style("fill", function(d) { return color(d); });

dot.append("text")
   .attr("y", 10)
   .text(function(d) { return d.name; });

In the call to position, you would need to set the transform attribute. You may have to adjust the coordinates of the text element.