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