D3.js visible text

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>グラフを表示する</title>
	<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 
<style type="text/css">
div.card{
	width: 320px;
	float: left;
	margin: 5px;
	padding: 5px;
	border: 5px solid #fa0;
}
.axis path, .axis line{
	fill: none;
	stroke: black;
}
.axis text{
	font-size: 9px;
}
</style>
</head>
<body>
 
<script>
$(function(){
var dataset = [
	{legend:"apple", value:100},
	{legend:"orange", value:150},
	{legend:"banana", value:200}
];
 
var w = 300;
var h = 150;
 
var xScale = d3.scale.linear()
		.domain([0, d3.max(dataset.map(function(data){return data.value}))])
		.range([0, w])
 
var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom")
 
var svg = d3.select("body").append("svg")
		.attr({
			width: w,
			height: h
		})
 
svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr({
		x: 0,
		y: function(d, i){ return i*30; },
		width: function(d){ return d.value; },
		height: 20,
		fill: "green"
	})
 
svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d){ return d.legend; })
	.attr({
		x: 0,
		y: function(d, i){ return i*30+15; },
		fill: "white",
	})
});

svg.append("g")
	.attr({
		class: "axis",
		transform: "translate(0, "+ (h-30) +")"
	})
	.call(xAxis);
</script>
</body>
</html>

Modified http://code.jquery.com/jquery-1.10.1.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-1.10.1.min.js

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