dc.js - многократный Linechart на основе отдельных категорий в одном файле CSV

Question

Например, если у меня есть следующий CSV-файл:

category, number, total A,1,3 A,2,5 A,3,1 B,1,4 B,2,6 B,3,1 C,1,5 C,2,2 C,3,4

Я был в состоянии следовать следующему примеру и выделить данные в различные файлы csv и составление каждого из них.

github link

Однако, мне было интересно, как бы я воссоздать те же lineCharts, если бы я только один файл CSV и разделить каждый Linechart каждой сгруппированных категории.

Спасибо.

Answer 1

Вы можете reduce данные, чтобы дать 3-х различных массивов, каждый из которых содержит только данные из каждой категории:

var grouped = data.reduce(function(o,d) { 
    if(o[d.category]) { 
    o[d.category].push(d); 
    } else { 
    o[d.category] = [d]; 
    } 
    return o; 
}, {}); 

Обычно в d3 мы работаем с массивами данных, поэтому я хотел бы использовать d3.map, чтобы преобразовать его в массив пар ключ/значение

var lineData = d3.map(grouped).entries() 

Теперь вы можете использовать это, чтобы создать линии (оставляя создание шкалы x и y), svg элемент и т.д .:

var line = d3.svg.line() 
      .x(function(d){return x(d.number)}) 
      .y(function(d){return y(d.total)}) 

var linesGroup = svg.append("g") 

var lines = linesGroup.data(lineData).enter() 
         .append("line") 
         .attr("d", function(d){return line(d.value)}) 

Вы также можете установить цвет обводки с помощью d.key для записей d3.map (который будет поступать из ключа мы использовали в шаге снижения - категория). Не забудьте также преобразовать данные csv в номера, используя parseInt().

Answer 2

@ Ответ minikomi - это прямой способ d3 для этого.

dc.js/crossfilter способ сделать это (если вы хотите, чтобы ваши графики, чтобы уменьшить значения для каждого ключа и взаимодействовать/фильтр с другими постоянного тока графики) является сокращение нескольких значений в одной группе, как это:

var group = dimension.group().reduce(
    function(p, v) { // add 
     p[v.type] = (p[v.type] || 0) + v.value; 
     return p; 
    }, 
    function(p, v) { // remove 
     p[v.type] -= v.value; 
     return p; 
    }, 
    function() { // initial 
     return {}; 
}); 

https://github.com/dc-js/dc.js/wiki/FAQ#rows-contain-a-single-value-but-a-different-value-per-row

Затем вы можете указать каждую линейную диаграмму, передавая группу вместе с аксессором методы .group следующим образом:

lineChartA.group(group, 'A', function(a) { return x.A; }) 
lineChartB.group(group, 'B', function(a) { return x.B; }) 

Если вы хотите совместить линейные диаграммы в одном графике, вы можете составить их с помощью composite chart или series chart