d3.js でx軸のラベルを文字列にする

ysugiyama12 137views 更新:2017年5月24日

通常はラベルの数値を元に範囲を取得して均等に表示する処理をしているが、それをせずにデータ数に応じて均等に配置する。
いじる部分だけピックアップ

    var xScale = d3.scale
        .ordinal()
        .domain(d3.range(gdp.length))
        .rangeRoundBands([0, width], 0.05);



var xAxis = d3.svg .axis() .scale(xScale) .orient("bottom") .tickSize(6, -height) .innerTickSize(-height) .outerTickSize(0) .tickFormat(function(d) { return xscale_label[d]; }) .tickPadding(adjust_xAxis);

データの間隔は総データ数から均等になるように計算式によってうまく調整するとよい。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません