How to add numbers to bars with d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// Create an array of data
var data = [10, 20, 30, 40, 50];

// Set up the SVG canvas
var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 300);

// Create a scale for the x-axis
var xScale = d3.scaleBand()
  .domain(d3.range(data.length))
  .range([0, 400])
  .padding(0.1);

// Create a scale for the y-axis
var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 200]);

// Create the bars
svg.selectAll("rect")
  .data(data)
  .enter().append("rect")
  .attr("x", function(d, i) { return xScale(i); })
  .attr("y", function(d) { return 200 - yScale(d); })
  .attr("width", xScale.bandwidth())
  .attr("height", function(d) { return yScale(d); })
  .attr("fill", "steelblue");

// Add the numbers to the bars
svg.selectAll("text")
  .data(data)
  .enter().append("text")
  .text(function(d) { return d; })
  .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; })
  .attr("y", function(d) { return 200 - yScale(d) + 20; })
  .attr("text-anchor", "middle")
  .attr("fill", "white");