block by NPashaP 0fd83cc54ca9fcd6a5ea84c551c24346

Viz - Bar - Value Label

Full Screen

index.html

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
  </head>
<style>
.viz-bar .bar{
  fill: steelblue;
}
#labels text{
	text-anchor:middle;
	font-size:26px;
	fill:white;
}
</style>
<body>
<svg width="960" height="500">
<g transform="translate(50,50)">
	<g  id="bars" ></g>
	<g  id="labels" ></g>
</g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//vizjs.org/viz.v1.3.0.min.js"></script>
<script>

var data=[{key:2, value:10},{key:3, value:4},{key:5, value:6},{key:8, value:1}];

var bar = viz.bar().data(data)

d3.select("#bars").call(bar);

d3.select("#labels")
	.selectAll("text")
	.data(bar.bars())
	.enter()
	.append("text")
	.attr("dy","6")
	.attr("x",function(d){ return d.x+d.width/2})
	.attr("y",function(d){ return d.y+d.height/2})
	.text(function(d){ return d.data.value; })
	
</script>