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

ため

コードは、私は視覚的にOKになりますきれいなソリューションを必要としています。多くのおかげで

Answer 1

一つの解決策は、あなたがバーチャートをお持ちの場合は、単にCSSでそれを修正することができhttps://github.com/dc-js/dc.js/issues/731

を参照し、x軸上の目盛りを回転させるために、次のようになります。

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