dc.js x轴与日期重叠

时间:2016-11-16 10:50:22

标签: javascript d3.js dc.js

我有一张x轴上有时间的复合图表。日期重叠主要是因为当新月出现时,它显示月份并且没有空格。见screeshot。enter image description here

复合代码

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

我只需要一个看起来不错的干净解决方案。非常感谢

1 个答案:

答案 0 :(得分:2)

一种解决方案是旋转x轴上的刻度线,参见https://github.com/dc-js/dc.js/issues/731

如果你有一个条形图,你只需通过css修复它:

class CustomCell: UITableViewCell {

@IBOutlet weak var timerLabel: UILabel!

var timer = Timer()

func updateRow(){
    print("started timer")
    timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(CustomCell.decreaseTimer), userInfo: nil, repeats: true)
}

func decreaseTimer(){
    let cell = self
    let timerVal = cell.timerLabel.text
    print("decrease "+timerVal!)
    //how to reflect this timerVal value in the cell?
}}