dc.js で BarChart を描画するときにx軸とy軸のラベルを表示する - kakakakakku blog

前回のエントリーで，dc.js を使った棒グラフでx軸とy軸のラベルを付ける方法をまとめたけど，よくよく見てみると，x軸のラベルがセンタリングされてなくて，さぁどうしよう！みたいな状態にw

恐らくだけど，y軸のラベルやマージンなどの影響でうまくセンタリングされなくなっちゃってるみたいな状況なんじゃないかと...

f:id:kakku22:20141006114423p:plain

結果的にうまく解決する方法が見つからなかったんだけど，表示だけなら実現する方法を試してみたのでまとめておく．もし解決方法を知ってる方がいれば是非情報提供をお待ちしています！

How do you add axis labels to bar charts にこう書かれてるのもあるし，恐らく同じところに困ってる人は多少はいそう．

I think the x axis label isn't correctly centered.

`postRender` で SVG の text 要素を追加する方法（描画タイミングに問題あり）

これは Y and X axes labels · Issue #271 · dc-js/dc.js · GitHub に載ってた回避方法で，postRender のイベントリスナーで，自分で text 要素を追加してしまうやり方．.xAxisLabel で書き出される text 要素の DOM を見ながら，自分で位置を調整しながら書いてみたのがこんな感じ．

dc.barChart("#xxx")
  .xAxisLabel("")
  .on('postRender', function(chart) {
    chart.svg().append('text')
    .attr('transform', 'translate(215,190)')
    .attr('class', 'x-axis-label')
    .attr('text-anchor', 'top')
    .text('スコア');
  })