D3.js - Axis

sample_d3-axis.js

// set scale
var y = d3.scaleLinear()
    .range([height, 0]) // 実際のピクセル
    .domain([0,200])    // データの範囲
    .clamp(true) // domain範囲を超えるデータは自動的にカット
    ;

// extentは最大値と最小値を返す
var x = d3.scaleTime()
    .range([0, width])
    .domain([new Date("2016-06"),new Date("2016-07")]);
x.domain(d3.extent(scope.data, function(d) { return d.created_at; }));

// set the Axis
//  - https://github.com/d3/d3-axis
var yAxis = d3.axisLeft(y)
    .tickSizeInner(-( width + 20 )) // innerは初期値で正の方向に飛び出しているので、負の値にすると表全体のグリッドになる
    .tickSizeOuter(0)
    .tickValues([220,180,140,100,60]); // 特定の値にTickを付ける

// 軸ラベルの表記を変える
var xAxis = d3.axisBottom(x)
    .tickFormat(function(d){
        var formatMonth = d3.timeFormat('%m');
        var str;
        if(formatMonth(d) == '01'){
            var formatMonthYear = d3.timeFormat('%Y年%m月');
            str = formatMonthYear(d);
        }
        else {
            str = formatMonth(d) + "月";
        }
        return str;
    });

// yAxis left
svg.append("g")
    .attr("class", "axis y")
    .call(yAxis)
    .append("text")　// 軸のレジェンド
        .attr("transform", "rotate(0)")
        .attr("y", 0)
        .attr("x", 0)
        .attr("font-size", "8px")
        .attr("fill", "black")
        .attr("stroke", "none")
        .text("km/h");