kakakakakku blog

Weekly Tech Blog: Keep on Learning!

dc.js の BarChart でx軸のラベルをセンタリングする方法(微妙)

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.

postRenderSVG の 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('スコア');
  })

ただし,postRender を使う弊害があって,実際に棒グラフが描画された後に,ポッと遅れて描画されるので,x軸ラベルだけがあとから浮かび上がってくるような見た目になってしまう.

なので,実際に使えそうな UI ではなく,引き続き,さぁどうしよう!な状態は変わりませんw

関連エントリー

How do you add axis labels to bar charts
Y and X axes labels · Issue #271 · dc-js/dc.js · GitHub
How to add axis labels for row chart using dc.js or d3.js - Stack Overflow