dc.js内のbarchartのx軸上の重なり合うラベルのスキップ

Question

dc.jsチャートのx軸上のラベルを動的にスキップして、大きなデータセットに対して重複しないようにする方法。ここで

は私のスクリプト

requestDateBarChart 
      .width(725) 
      .height(300) 
      .margins({top: 10, right: 10, bottom: 60, left: 30}) 
      .dimension(requestDateDimension) 
      .group(requestDateGroup) 
      .x(d3.scale.ordinal().domain(coh.map(function (d) {return d.customerRequestDate; }))) 
      .xUnits(dc.units.ordinal) 
      .elasticY(true) 
      .renderHorizontalGridLines(true) 
      .on('renderlet',function(chart){ 
        chart.selectAll("g.x text") 
        .attr('dx', '-15') 
        .attr('transform', "rotate(-55)"); 
       }) 
      .controlsUseVisibility(true); 

Answer 1

dc.jsで軸がd3.jsによって生成されるの一部であるので、この1を支援するためにそこに巨大なコミュニティがあります。 x軸にアクセスするには、chart.xAxis()を使用します。軸オブジェクトを返すので注意してください。I don't recommend chaining it with your other chart initialization code。

この場合、「d3軸の序数」と「this example popped up」を検索しました。関連する機能はaxis.tickValues()です。あなたはXスケールドメインを生成するためにcoh.map(function (d) {return d.customerRequestDate; })を使用しているので

は、あなたはとてもように4回ごとの目盛りを使用することができます。

var domain = coh.map(function (d) {return d.customerRequestDate; }); 
requestDateBarChart.x(d3.scale.ordinal().domain(domain)) 
var ticks = domain.filter(function(v, i) { return i % 4 === 0; }); 
requestDateBarChart.xAxis().tickValues(ticks); 

あなたがスペースに収まることができティックMAXTICKSのいくつかの最大数を把握した場合、

var stride = Math.ceil(domain.length/MAXTICKS); 
var ticks = domain.filter(function(v, i) { return i % stride === 0; });