2. vertical barChart

Key

padding is done by barWidth - 1

<!DOCTYPE html>
<meta charset="utf-8">

<style>

.chart rect {
  fill: orange;
}

.chart text {
  fill: steelblue;
  font: 10px sans-serif;
  text-anchor: middle;
}
</style>

var width = 960,
    height = 500;

bar.append("rect")
// 	 rect's y coord default is 0 inherited from g  
//   set each rect's topLeft corner's "y" coord
      .attr("y", function(d) { return yScale(d.value); })
//   set each rect's height using canvas height and y coord
      .attr("height", function(d) { return height - yScale(d.value); })
      .attr("width", barWidth - 1);

// step 7
  bar.append("text")
//   set each text's x coord
      .attr("x", barWidth / 2)
//   set each text's y coord
      .attr("y", function(d) { return yScale(d.value) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.value; });
// attr text-anchor is set to middle

});

</script>

https://d3js.org/d3.v4.min.js