d3.js

D3JS軸を描画する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="https://d3js.org/d3.v3.min.js"></script> -->
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="shape1"></div>
<div id="myGraph"></div>
<style>
svg {
border: solid 1px #CCC;
}
</style>
<script>
var data = [10, 20, 30, 10, 40, 50, 20, 60];
var svg = d3.select("#shape1").append("svg")
.attr("width", 120)
.attr("height", 70);
// var svgWidth = 640; // SVG領域の横幅
// var svgHeight = 480; // SVG領域の縦幅
// var svg = d3.select("#shape1").append("svg")
// .attr("width", svgWidth).attr("height", svgHeight)
// 目盛りを表示するためにスケールを設定
var xScale = d3.scale.linear() // リニアスケールを設定
.domain([0, 60])
.range([0, 15*8]); // 実際の出力サイズ
// 目盛りを設定し表示する
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(5, 0)") // 目盛り全体の位置を調整する
.call(d3.svg.axis()
.scale(xScale) //スケールを適用する
// .orient("bottom")
.ticks(5) // 目盛りの間隔を5つにする
)
.selectAll("text") // スケールに表示された文字を選択する
.attr("x", 0) // X座標を指定する
.attr("y", 10) // Y座標を指定する
// rectの追加
// var svg = svg.selectAll("rect"); rect→svgに変更→違いがよくわからない
var svg = svg.selectAll("svg");
svg.data(data)
.enter()
.append("rect")
// 棒のxy座標 iはdataのindex
.attr("x", function (d, i) { return i * 15; })
.attr("y", function (d) { return 70 - d; })
// 1個の棒の幅 x座標との差分がMarginとなる
.attr("width", 10)
// 1個の棒の高さ
.attr("height", function (d) { return d; })
.style("fill", "#F00");
</script>
</body>
</html>

参考にしたページ
http://www.openspc2.org/reibun/D3.js/code/graph/axis/2001/index.html