カスタマイズdc.js日、x軸

Question

使用して棒グラフ：お互いに隣

actionsChart /* dc.barChart('#volume-month-chart', 'chartGroup') */ 
    .width(actionsWidth) 
    .height(240) 
    .margins({top: 10, right: 50, bottom: 30, left: 40}) 
    .dimension(dateDimension) 
    //... 
    .elasticX(true) 
    .elasticY(true) 
    .gap(1) 
    .alwaysUseRounding(true) 
    .x(d3.time.scale().domain([ minDate, maxDate ])) 
    .round(d3.time.day.round) 
    .xUnits(d3.time.days) 
    .renderHorizontalGridLines(true) 
    //.xAxisLabel('Dan') 
    //.xAxisPadding(2) 
    .xAxisLabel("Datum") 
    //.yAxisLabel("Akcije") // OK, but already in title 
    .xAxisPadding(1) 
    //nok in dc: //.tickFormat(d3.time.format("%Y-%m-%d")) 
    //.label(function(d){ return JSON.stringify(d); }) 
    ; 

それはx軸にラベルを取得読めない（あまりにも多くの文字ラベルを配置する方法

。各5または7日、およびフォーマットをカスタマイズ（月番号、なし曜日における日）？
はありがとう。

Answer 1

dc.jsは、主にその軸を描くためにd3v3のd3.svg.axisを使用しています。

あなたはd3.svg.axis.ticks()とd3.svg.axis.tickFormat()を探していてもよいです。

chart.xAxis()を呼び出すことによってdc.jsが使用するd3軸オブジェクトを得ることができますが、これはit gets confusing when you you chain function calls but they return different objectsなので、他のグラフの初期化とは別のステートメントで行うことをお勧めします。

ので、（未テスト）のようなもの：

chart.xAxis() 
    .ticks(d3.time.days, 7) 
    .tickFormat(d3.time.format('%e')); 

d3v3 time formatting specifiers

あなたが欲しいものを行うための自動ダニ・ジェネレータを得ることができない場合、あなたは常に使用してダニの正確なリストを指定することができます.tickValues()。

function calc_ticks(chart) { 
    var ticks = d3.time.weeks(chart.xAxisMin(), chart.xAxisMax()); // or days(chart.xAxisMin(), chart.xAxisMax(), 5) 
    chart.xAxis().tickValues(ticks); 
} 
chart.on('preRender', calc_ticks) 
    .on('preRedraw', calc_ticks);