【问题标题】:dc.js time series line chartdc.js 时间序列折线图
【发布时间】:2015-03-31 09:27:30
【问题描述】:

我正在绘制一个时间序列折线图,它在 x 轴上花费时间,在 y 轴上花费其他 resp 值。我需要帮助。该图未使用以下代码绘制。它只显示线(轴)和标签,但不显示图形或轴上的值。

data = [{"date": "31-03-2015 11:05:36", "snr": 3.2}, {"date": "31-03-2015 11:05:36", "snr": 4.9},...{"date": "31-03-2015 11:05:36", snr: 5.0}];

var parseDate = d3.time.format("%d-%m-%Y %H:%M:%S").parse;
        data.forEach(function(d) {
                     d.date = parseDate(d.date);
                     });

var dimByTime = cf.dimension(function(d) { return d.date;});
        var groupForSNR = dimByTime.groupAll();
        groupForSNR.all = function() { return 1; };

var snrAP = dc.lineChart("#snrAP");
        snrAP
        .dimension(dimByTime)
        .group(groupForSNR).valueAccessor(function(d) { return d.value.snr; })
        .x(d3.time.scale())
        .xUnits(d3.time.day);
dc.renderAll();

我想在 y 轴上显示 snr,在 x 轴上显示相应的 time

【问题讨论】:

    标签: dc.js timeserieschart


    【解决方案1】:

    嗯,我自己修好了。可能不是最佳解决方案,但它仍然符合我的目的。这是修改后的代码...

    var dimByTime = cf.dimension(function(d) { return d3.time.minute(d.date);});
            var groupForSNR = dimByTime.group().reduce(
                                                       function reduceAdd(p, v) { return v.snr; },
                                                       function reduceRemove(p, v) { return v.snr; },
                                                       function reduceInitial() { return 0; });
            groupForSNR.dispose();
    
    var snrAP = dc.lineChart("#snrAP");
            snrAP
            .dimension(dimByTime)
            .group(groupForSNR)
            .x(d3.time.scale().domain([new Date(2015, 02, 21), new Date()]))
            .xUnits(d3.time.minute)
            .title(function(d){ return "Time: " + d.data.key.toDateString() + "\nS/N Ratio: " + numFormat(d.data.value); })
            .xAxis().ticks(5);
    

    【讨论】: