Как определить размеры и группы в dc.js? - PullRequest
Новая
       50

Как определить размеры и группы в dc.js?

0 голосов
/ 05 июня 2018

Я новичок в dc.js и сталкиваюсь с проблемами при определении размеров и групп.У меня есть такие данные 

this.data = [
    {Type:'Type1', Day:1, Count: 20},
    {Type:'Type2', Day:1, Count: 10},
    {Type:'Type1', Day:2, Count: 30},
    {Type:'Type2', Day:2, Count: 10}
]

Мне нужно показать составную диаграмму из двух линейных диаграмм, одна для типа Type1, а другая для Type2.Моя ось X будет Днем.Итак, одним из моих измерений будет День 

var ndx = crossfilter(this.data);
var dayDim = ndx.dimension(function(d) { return d.Day; })

Как будет осуществляться группировка?Если я делаю это на счетчике, показывается общий счет за определенный день, который я не хочу.

Ответы [ 2 ]

0 голосов
/ 14 июня 2018

Хотя то, что предложил Гордон, работает отлично, если вы хотите добиться того же результата, используя составную диаграмму, вы можете использовать метод group.reduce (добавить, удалить, начальный) . 

function reduceAdd(p, v) {
  if (v.Type === "Type1") {
    p.docCount += v.Count;
  } 
  return p;
}

function reduceRemove(p, v) {
  if (v.Type === "Type1") {
    p.docCount -= v.Count;
  } 
  return p;
}

function reduceInitial() {
  return { docCount: 0 };
}

Вот пример: http://jsfiddle.net/curtisp/7frw79q6

Цитирование Гордон :

Диаграмма серии представляет собой просто составную диаграмму с автоматическим разбиением данных игенерация дочерних карт.

0 голосов
/ 06 июня 2018

Ваш вопрос не совсем понятен, но звучит так, как будто вы хотите сгруппировать по Type и Day

Один из способов сделать это - использовать составные ключи: 

var typeDayDimension = ndx.dimension(function(d) {return [d.Type, d.Day]; }),
    typeDayGroup = typeDayDimension.group().reduceSum(function(d) { return d.Count; });

Тогда вы могли бы использовать диаграмму серии для генерации двух линейных диаграмм внутри составной диаграммы.

var chart = dc.seriesChart("#test");
chart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c); })
    // ...
    .dimension(typeDayDimension)
    .group(typeDayGroup)
    .seriesAccessor(function(d) {return d.key[0];})
    .keyAccessor(function(d) {return +d.key[1];}) // convert to number
    // ...

Подробнее см. пример диаграммы серии .

...