忘れたときに備えた記録

トップ «前の日記(2013-03-31(Sunday)) 最新 次の日記(2013-09-29(Sunday))» 編集
2005|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|11|12|
2009|01|02|03|04|05|06|10|12|
2010|06|07|08|12|
2011|07|09|
2012|09|11|
2013|02|03|09|
2015|10|11|
2016|01|08|11|
2017|02|08|10|
2018|11|

2013-09-24(Tuesday)

D3.js の d3.svg.axis で、ラベルの位置に応じて処理を変える方法

平日なのにちょっと遅くなったので、一見さんお断り的に背景は省略して要点だけ書いてしまうのです。

まず、 axis に渡す scale を定義します

scale = d3.scale.linear().hogefuga...

ついで axis を作り、さっきの scale を使ってデータ引数から座標を決定できます

xis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(function(d, i){
    d; // ticksの値(デフォルトでラベルの数字になる値)
    var pos = scale(d); // ラベルの軸上の位置
    // 引数 i は何番目のラベルかが分かる。
    if(i==0){
      return "最初のラベルで場所は"+pos;
    } else {
      return "["+i+"]"+d+"/"+pos;
    }
  });

どっとはらい

Tags: d3.js
[]