読者です 読者をやめる 読者になる 読者になる

D3.jsでレーダーチャートを書く(3日目)

前回に引き続きレーダーチャートを書き続けます!とりあえず今回で終わりにします。

今日は頂点にラベルをつけてみるのと、チャートを色分けするのをやってみます。

ラベル

各頂点が何番目のパラメータが対応しているのかを表示したいです。

SVGのtextを使うんだろうけど、座標をどうやって決めるか。1番外側のグリッドの頂点の座標にtextを表示すればよさそう。
なので、前回作ったline関数のx,yを参考にする。

var line = d3.svg.line()
            .x(function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
            .y(function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
            .interpolate('linear');

ラベルのためのデータセットを用意。1番外側のグリッドの頂点にしたいので、データの要素数と最大値を使って書く。

var paramCount = ... // 入力データの要素数
var max = ... // 入力データの最大値
var label  = (function(){
  var result = [];
  for(var i=0; i<paramCount; i++){
    result.push(max);
  }
  return result;
})();

textを追加するコードは以下のように書いてみた。

svg.selectAll("text")
   .data(label)
   .enter()
   .append('text')
   .text(function(d, i){ return i+1; })
   .attr('x', function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / 5 * i - (Math.PI / 2)) + w/2; }
   .attr('y', function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / 5 * i - (Math.PI / 2)) + w/2; }
   .attr("font-size", "15px");

1234567

うん、悪くない!考え方はあってる気がする。
見切れちゃってるので、SVG領域とレーダーチャートの間に隙間を作ろう。データ値と表示上のピクセル値をマッピングするための関数を前回作ったので、そこを修正すればいい。

var padding = 20;
var rScale = d3.scale.linear()
               .domain([0, 5])
               .range([0, w/2 - padding]);

1234567

よしよし。
お、ここで閃いた!一番外側のグリッドより大きい半径の円周上にラベルを表示したらいいんじゃないか!?

var label  = (function(){
  var result = [];
  for(var i=0; i<paramCount; i++){
    result.push(max + 1); // 1番大きなデータ値に+1する
  }
  return result;
})(),

1234567

おー!いい感じ。文字の位置をちょっと直したいので、text-anchor属性とdominant-baseline属性を設定してみる。

svg.selectAll("text")
   .data(label)
   .enter()
   .append('text')
   .text(function(d, i){ return i+1; })
   .attr("text-anchor", "middle")
   .attr("dominant-baseline", "middle")
   .attr('x', function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / 5 * i - (Math.PI / 2)) + w/2; })
   .attr('y', function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / 5 * i - (Math.PI / 2)) + w/2; })
   .attr("font-size", "15px");

1234567

よしよし。ラベルはこれでよしとしよう。

色付け

お次はチャートに色づけ。D3.jsのサンプルって色がきれいですよねー。おれもいい感じに色選びたいなぁなんて思ってたら、D3.jsに色の配列を取得する方法が用意されてるんですね(このへんを参照)。それを使ってチャートを色づけしてみます。
単純に"black"って書いてたところを、データ添字を使って色を決めるようにします。

svg.selectAll('path')
   .data(dataset)
   .enter()
   .append('path')
   .attr('d', function(d){
     return line(d)+"z";
   })
//   .attr("stroke", "black")
   .attr("stroke", function(d, i){ return d3.scale.category10().range()[i]; })
   .attr("stroke-width", 2)
   .attr('fill', 'none');

1234567

おー、色分けされた!

おしまい

今日でレーダーチャートを書くのは終えようと思います。他にも色々機能があるので使ってみたいなぁ。地図とか楽しそう。
D3.jsは試行錯誤しながら書いていくのが楽しいですねー。

ソースコードこちら。

D3.jsでレーダーチャート