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에 의해 생산의 일부이기 때문에이 일에 도움이 거기에 거대한 커뮤니티가있다. x 축에 액세스하려면 chart.xAxis()을 사용할 수 있습니다. 축 객체를 반환하므로 신중해야합니다 (I don't recommend chaining it with your other chart initialization code).

이 경우 "d3 axis ordinal ticks"및 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; });