在 dc.seriesChart 中创建 3 行

Question

如何在 dc.seriesChart 中创建 3 行（组 1、组 2、组 3），在此仪表板中 - https://jsfiddle.net/gubzh/j15szqhk/24/

var ndx = crossfilter(records);
var all = ndx.groupAll();
//console.log(all);

var priorityDim         = ndx.dimension(function (d) { return d.priority; });
var dateDim             = ndx.dimension(function (d) { return d.timestamp; });
var datePriorityDim     = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});

var priorityGroup       = priorityDim.group();
var numRecordsByDate    = dateDim.group();
var datePriorityGroup   = datePriorityDim.group().reduceCount();

var minDate = dateDim.bottom(1)[0].timestamp;
var maxDate = dateDim.top(1)[0].timestamp;
priorityTimeChart
    .width(400)
    .height(200)
    .chart(function(c) { return new dc.lineChart(c); })
    .x(d3.scaleTime().domain([minDate, maxDate]))
    .brushOn(false)
    .yAxisLabel("Events")
    .xAxisLabel("Date")
    .elasticY(true)
    .dimension(dateDim)
    .group(datePriorityGroup)
    .seriesAccessor(function(d) {return "priority: " + d.key[0];})
    .keyAccessor(function(d) {return +d.key[1];})
    .valueAccessor(function(d) {return +d.value;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
priorityTimeChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
priorityTimeChart.margins().left += 10;

例如- https://dc-js.github.io/dc.js/examples/range-series.html

提前致谢。

Answer 1

你基本上已经明白了，但看起来你已经+到处撒了水，努力让事情正常进行。

在JavaScript中，表达式前的+是将其转换为数字的简单方法。

您通常只需要在从 CSV 文件中提取数据时执行此操作，其中所有值都是字符串。

但是，您转换的很多东西都不是数字。特别是你

var datePriorityDim = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});

应该是

var datePriorityDim = ndx.dimension(function (d) { return [d.priority, d.timestamp];});

d.priority是字符串，d.timestamp是日期。我用

记录了你的群组内容

console.log(datePriorityGroup.all())

并注意到您的钥匙是

[NaN, 1581314400000]

将日期转换为数字似乎无害，但将优先级更改为 NaN 将导致所有优先级组被合并在一起。本该有12个的结果却只有4个。

有了修复：

Fork of your fiddle.

在 dc.seriesChart 中创建 3 行

Create 3 lines in dc.seriesChart

dc.js

crossfilter