Accepted answer

You've almost got it but few minor changes would help get the desired result.

  1. I think you mean to use "y" and not "yscale" (yscale is not defined)

  2. It's always better to use a <g> and wrap the dots within it. Here's a snippet of that: svg.append("g").classed('dots', true);

  3. Now append all the dots and texts to the (group) i.e.'g.dots').selectAll(".dot").data(data).enter().....'g.dots').selectAll("text").data(data).enter()....
  4. That's it. Here's a DEMO. You can now apply font-styles to the texts as per the requirement.

Hope this helps. :)

Related Query

More Query from same tag