CODEWITHSUNDEEP
d3.jssvgnvd3.js
codecraig
codecraig

Reputation: 3158

Add text / label to each point / circle in nvd3 scatter plot?

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?

Upvotes: 0

Views: 842

Answers (2)

John Stephenson
John Stephenson

Reputation: 501

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.

Upvotes: 1

David
David

Reputation: 61

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]+")");
});

Upvotes: 0

Related Questions