dc.js 折线图未显示任何内容
dc.js linechart not showing anything
我正在使用 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');
但我得到以下没有任何图表的空白内容。
为什么我看不到图表。我的图表需要什么样的改变。我想显示特定时间段内的总事件。有多个探测器同时响应。我想在特定时间显示这些检测器的数量。
我对您的 fiddle 进行了一些更改并使其正常工作。
这是我的叉子:http://jsfiddle.net/gordonwoodhull/6e67uzfn/11/
我做的一些改动:
- 修复了语法无效的日期。 (我自己编的,因为我
不确定你的意思。)
- 传递数据以使用
dateformat.parse()
解析日期
- 致电
chart.render()
- 删除了
group.reduceCount()
的参数,它不带任何参数
- (可能是您正在寻找的线索)调用
.xUnits(d3.time.days)
- 此调用是必需的,以便 dc.js 知道在 x 轴上创建什么刻度。
您需要将 xUnits
的粒度与您用于日期仓的粒度相匹配。在定义维度或组时指定 bin 粒度,例如如果你想按天分类,
var countByTime = data.dimension(function(d) { return d3.time.day(d.time); });
否则它将使用准确的时间值,精确到毫秒并且可能根本不会合并。
希望对您有所帮助!
我正在使用 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');
但我得到以下没有任何图表的空白内容。
我对您的 fiddle 进行了一些更改并使其正常工作。
这是我的叉子:http://jsfiddle.net/gordonwoodhull/6e67uzfn/11/
我做的一些改动:
- 修复了语法无效的日期。 (我自己编的,因为我 不确定你的意思。)
- 传递数据以使用
dateformat.parse()
解析日期
- 致电
chart.render()
- 删除了
group.reduceCount()
的参数,它不带任何参数 - (可能是您正在寻找的线索)调用
.xUnits(d3.time.days)
- 此调用是必需的,以便 dc.js 知道在 x 轴上创建什么刻度。
您需要将 xUnits
的粒度与您用于日期仓的粒度相匹配。在定义维度或组时指定 bin 粒度,例如如果你想按天分类,
var countByTime = data.dimension(function(d) { return d3.time.day(d.time); });
否则它将使用准确的时间值,精确到毫秒并且可能根本不会合并。
希望对您有所帮助!