2016-11-16 4 views
1

나는 x 축에 시간이 표시된 복합 차트가 있습니다. 날짜가 중복되는 이유는 주로 새 달이 나타나면 그 달이 표시되고 아무 공간도 없기 때문입니다. screeshot을 참조하십시오. 복합dc.js x 축과 날짜가 겹치다

var parseDate = d3.time.format("%d/%m/%Y").parse; 
    data.forEach(function (d) { 
     d.Date = parseDate(d.Date); 
     d.total = d.Alertness + d.Accuracy + d.Concentration + d.ErrorAwareness + d.SelfControl; 
     d.Year = d.Date.getFullYear(); 
    }); 

    var dateDim = ndx.dimension(function (d) { return d.Date; }); 
    var minDate = dateDim.bottom(1)[0].Date; 
    var maxDate = dateDim.top(1)[0].Date; 
    composite 
     .width(600) 
     .height(400) 
     .x(d3.time.scale().domain([minDate, maxDate])) 
     .yAxisLabel("Percent %") 
     .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5)) 
     .renderHorizontalGridLines(true) 
     .compose([ 
      dc.lineChart(composite) 
       .dimension(dateDim) 
       .colors('red') 
       .group(accuracy, "Accuracy") 
       .valueAccessor(function (p) { 
        if (p.value.count > 0) { 
         var totalC = p.value.total/p.value.count; 

         return totalC; 
        } 
        else { 
         return 0; 
        } 


       })]) 
    .elasticY(true) 
     .brushOn(true) 

     .render(); 

에 대한 enter image description here

코드는 그냥 시각적으로 확인 모양 깨끗한 솔루션이 필요합니다. 많은 감사

답변

2

하나 개의 솔루션은 막대 차트가있는 경우 당신은 단순히 CSS를하여 문제를 해결할 수 https://github.com/dc-js/dc.js/issues/731

를 참조 x 축에 눈금을 회전하는 것입니다 :

#my-bar-chart .x.axis text { 
    text-anchor: end !important; 
    transform: rotate(-45deg); 
}