説明
D3.jsでリニア（直線的）な横の目盛りを表示するにはd3.scale.linear()メソッドを使います。このままでも目盛りを表示することができますが、数値が重なってしまったりして、うまく表示されないことがあります。このような場合に目盛りの内部と出力のスケールを調整する必要があります。元のスケールはdomain()メソッドで指定します。パラメーターには[開始値, 終了値]のように配列形式で指定します。この開始値と終了値の範囲を実際に出力する範囲に調整するにはrange()メソッドを使います。指定するパラメーターはdomain()メソッドと同じように[開始値, 終了値]のように配列形式で指定します。
次にsvg要素内に目盛りを表示するグループ(g)要素を追加します。attr()メソッドを使って表示位置を指定します。目盛りは位置を調整しないと表示が切れてしまいます。これはattr()メソッドの最初のパラメーターにtransformを指定し、2番目のパラメーターにtranslate(10, 0)のようにX座標とY座標の移動量を指定します。
あとはcall(d3.svg.axis().scale(xScale));とすれば目盛りが表示されます。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>
JavaScriptコード
var svgWidth = 640; // SVG領域の横幅
var svgHeight = 480; // SVG領域の縦幅
var svg = d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
// 目盛りを表示するためにスケールを設定
var xScale = d3.scale.linear() // スケールを設定
.domain([0, 100]) // 元のサイズ
.range([0, 4*100]); // 実際の出力サイズ
// 目盛りを設定し表示する
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(10, 0)")
.call(d3.svg.axis()
.scale(xScale) //スケールを適用する
);