Создайте 3 строки в d c .seriesChart

Question

Как создать 3 строки (group1, group2, group3) в d c .seriesChart, в этой панели - 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.

С исправлением:

Вилка вашей скрипки .