dc.js x軸與日期重疊

Question

我在x軸上有一個隨時間變化的複合圖表。日期重疊主要是因爲當新月發生時，它顯示月份並且沒有空間。看screeshot。

守則複合

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(); 

我只是需要一個乾淨的解決方案，這將看上去正常視覺。非常感謝

Answer 1

一個解決辦法是繞X軸的刻度，見https://github.com/dc-js/dc.js/issues/731

如果你有一個柱形圖，你可以簡單地通過CSS修復：

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