【问题标题】:dc.js linechart not showing anythingdc.js 折线图没有显示任何内容
【发布时间】:2015-04-08 18:21:56
【问题描述】:

我正在使用 dc.lineChart 生成折线图来显示频率与时间的关系。以下是我的代码

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

但是我得到以下没有任何图表的空白内容。 为什么我看不到图表。我的图表需要什么样的改变。我想显示特定时间段内的总事件。有许多探测器同时给出响应。我想显示这些检测器在特定时间的计数。

【问题讨论】:

  • 你能创建一个小提琴吗?没有简单的自包含示例就很难排除故障
  • 首先要检查的是您的组正在返回您期望的数据,而不是 NaN 等
  • 可能我的小组正在返回 NaN。但为什么会发生呢?我很困惑需要什么改变。
  • 你能看到这个链接并帮助我继续。 jsfiddle.net/y18LkwLt
  • 我没有在jsfiddle中为dc.js和d3.js添加外部资源

标签: d3.js dc.js crossfilter


【解决方案1】:

我对您的小提琴进行了一些更改并使其正常工作。

这是我的叉子: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); });

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

希望这会有所帮助!

【讨论】:

  • 您好,我没有使用日期。而是采用 H:M:S 格式的时间。
  • 当然,您完全可以更改日期格式来解析时间。 (您的示例有未引用的时间和日期格式,所以我不太确定该怎么做。)因此您可能想要使用 d3.time.hoursd3.time.minutes
  • 非常感谢。我明白了
  • 你好。但它不工作的时间。你能编辑你的小提琴的时间格式吗?小提琴在这里。在 x 轴上,它显示所有值,而不仅仅是分钟 jsfiddle.net/6e67uzfn/13
  • 你的意思是刻度格式?这有帮助吗? var minutesOnly = d3.time.format(':%M'); var xAxis = freqchart.xAxis().tickFormat(minutesOnly); 在这里提琴:jsfiddle.net/gordonwoodhull/6e67uzfn/15
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-24
  • 2014-07-21
  • 2016-02-19
  • 2020-06-16
相关资源
最近更新 更多