0

I've followed the nvd3 scatter plot example to create a scatter plot: http://nvd3.org/examples/scatter.html

What i'd like to do is display the "size" property (from the data) beneath each circle. I've been trying various combinations of trying to selectAll of the "g.nv-group" elements and then appending "text", but nothing is working.

Any thoughts?

codecraig
  • 3,118
  • 9
  • 48
  • 62
  • 1
    https://stackoverflow.com/questions/34279908/appending-text-to-points-in-angular-nvd3 You may make sure of the code snippet here. Change `d3.select(d).data()[0][1]` to what you want to display, say `size`. – Adam Aiken Jun 22 '17 at 15:25

2 Answers2

1

If the data has a label property and 

chart.showLabels(true)

then this discussion on a closed (not merged) PR suggests it should work. Works on lineCharts.

John Stephenson
  • 499
  • 4
  • 13
0

I tweaked code from the link from the comment above, in my case, this worked

d3.selectAll(".nv-group path")[0].forEach(function(d){
      var tf = d3.select(d).attr("transform")
      t = d3.transform(tf).translate;
      t[0] = t[0] +10;//moving the translate x by 5 pixel.
      console.log(d3.select(d).data()[0])//data associated with the point
      d3.select(d.parentNode)
        .append("text")
        .attr("class", "label")
        .text("data: "+ d3.select(d).data()[0][0].size)//putting data
        .attr("transform", "translate("+t[0]+","+t[1]+")");
});
David
  • 61
  • 3