グラフに罫線いれてみた

d3.jsでグラフを描いている。元々はHTMLとCSSでというか、PHPで出力して、表を書き、画像を数値に合わせて引き伸ばしていたものを「グラフ」として描くようにしたものだ。

その時に、各バーの間の罫線を描画しないようにしたのであるが、バーが長いところは、バーと数値が近いので読み取りやすいのであるが、バーが短いところ、基準は最大値なので、値が小さいところは数値とバーの間隔が広くなり、関係が見にくくなっていた。レイアウトを見直してもいいのであるが、気に入っているのと、どうするのがいいか最適解がわからないので現状でなんとかしたかった。

で、とりあえず、元のようにバーの間に線を描画したらいいのではないかということで、このようにしてみた。

d3.jsでsvgのline、pathを使って描画することになった。が、折れ線グラフではないので、一括で指定はできない。それぞれ独立したものとして、描画することになる。

ということで、関数化してみた。

function drawLines(svg, startx, endx, height, count) {
　　var line = d3.svg.line()
　　　　.x(function(d){ return d[0]; })
　　　　.y(function(d){ return d[1]; });
    for (i = 0; i < count; i++) {
        svg.append("path") // パスを追加
           .attr("stroke", "black") // 線の色を黒にする
           .attr("fill", "none") // 線の塗りを無しにする
           .attr("d", function(d){
                return line([[startx, (i + 1) * height], [endx, (i + 1) * height]]);});
           }
    }
}

このような関数である。使う時は、svgにはグラフを描画しているsvgオブジェクトをselectして渡し、startx, endxは始点と終点のx座標、heightは棒グラフ（横向き）1本の高さ、countはグラフの描画数（棒グラフの数）である。

d3.jsをこのように使うのが正しいかは知らないが、まぁ、使いたいように使うのはありだろうということで、しばらく使ってみようかと思う。