dc.js折线图没有显示任何内容

时间:2015-04-08 18:21:57

标签: d3.js dc.js crossfilter

我使用dc.lineChart生成折线图以显示频率VS时间。以下是我的代码

var freqchart=dc.lineChart("#chart1");
var ndx=crossfilter(data);
var countByTime=ndx.dimension(function (d) {

                return d.time;

        });

        var dateformat=d3.time.format("%m-%d-%Y");
        var freqbyTimeGroup = countByTime.group()
                .reduceCount(function(d) { return d.time; });
    freqchart.width(400).height(200).transitionDuration(500)
        .dimension(countByTime).group(freqbyTimeGroup)
        .elasticY(true).x(
                d3.time.scale().domain([d3.min(data,function(d){return d.time}),d3.max(data,function(d){return d.time})])).on("filtered", onFilt).yAxisLabel("Frequency").xAxisLabel('Time');

但我没有任何图表,我得到以下空白的东西。 enter image description here 为什么我不能查看图表。我的图表中需要进行哪些更改。我想在特定时间段内显示总事件。有许多探测器同时给出响应。我想在特定时间显示这些探测器的数量。

1 个答案:

答案 0 :(得分:4)

我对你的小提琴进行了一些改动,并让它发挥作用。

这是我的前叉:http://jsfiddle.net/gordonwoodhull/6e67uzfn/11/

我做了一些改变:

  1. 修复了语法无效的日期。 (因为我,我自己做了 我不确定你的意思。)
  2. 使用dateformat.parse()
  3. 对数据进行传递以解析日期
  4. 致电chart.render()
  5. 删除了group.reduceCount()的参数,该参数不带任何参数
  6. (可能是您正在寻找的线索)调用.xUnits(d3.time.days) - 此调用是必需的,以便dc.js知道在x轴上创建的刻度线。
  7. 您需要将xUnits的粒度与日期容器使用的粒度相匹配。您可以在定义维或组时指定bin粒度,例如如果你想按天分开,

        var countByTime = data.dimension(function(d) { return d3.time.day(d.time); });
    

    否则它将使用精确的时间值,这些时间值可以达到毫秒级,并且可能根本不会加起来。

    希望这有帮助!