d3.js - dc.js 折线图不显示任何内容

标签 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 为什么我看不到图表。我的图表需要什么样的改变。我想显示特定时间段内的全部事件。有多个探测器同时给出响应。我想显示特定时间这些探测器的数量。

最佳答案

我对你的 fiddle 进行了一些更改并使其正常工作。

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

我所做的一些更改:

  1. 修复了语法无效的日期。 (我自己编的,因为我 不确定你的意思。)
  2. 使用dateformat.parse()传递数据以解析日期
  3. 调用chart.render()
  4. 删除了 group.reduceCount() 的参数,该参数不接受任何参数
  5. (可能是您正在寻找的线索)调用 .xUnits(d3.time.days) - 需要进行此调用,以便 dc.js 知道在 x 轴上创建什么刻度。

您需要将 xUnits 的粒度与用于日期箱的粒度相匹配。您可以在定义维度或组时指定 bin 粒度,例如如果你想按天分类,

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

否则它将使用精确到毫秒的精确时间值,并且可能根本不会合并。

希望这有帮助!

关于d3.js - dc.js 折线图不显示任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29522426/

相关文章:

d3.js - 在 dc.js/Crossfilter 中添加过滤器不更新图表

javascript - 获取 crossfilter.js 错误 "too much recursion"

javascript - 使用 DC.js(crossfilter 和 d3 便利库)时出现问题 - 条形图不显示值

javascript - 使用不同的值和不同的数据大小更新 D3 柱形图

javascript - JS : Changing Color of Slider Rectangle

d3.js - DC JS : How to highlight rows in an aggregated data table on click, 类似于条形图?

javascript - DC.js 使图表容器或 div 更宽以正确显示图例

javascript - dc js - 使用 dc js 的直方图

css - 显示特定的 Tick 值

css - D3.js 实现轴标签 SVG 的省略号