Многострочная диаграмма

Question

Я пытаюсь создать композитный многострочный график, используя составные диаграммы dc.js. Мои данные в следующем формате:

var indexData = [ 
    {id: "1", weekNumber: 1, topic:12}, 
    {id: "2", weekNumber: 7, topic:2}, 
    {id: "3", weekNumber: 5, topic:7}, 
] 

Я пытаюсь создать таблицу, такой, что на осях X У меня есть номер недели, а по оси Y I имеет частоту записи. Я хочу иметь строку для каждой темы (20 тем, а значит, 20 строк), показывающих количество записей за каждую неделю, которые имеют это значение.

Это то, что мой код выглядит следующим образом:

var topicTimeChart = dc.compositeChart("#topicsLineChart"); 

var crossFilterObj = crossfilter(indexData); 
var all = crossFilterObj.groupAll(); 

var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;}); 
var dateDimension = weekSelection.group().reduceCount(function(d){return d;}); 

var topicSelection = crossFilterObj.dimension(function(d){return d.topic;}); 

var topic0 = topicSelection.group().reduceCount(function (d){ 
     if (d == 0) { 
      return d; 
     } 
    }); 

topicTimeChart.width(1200) 
      .height(300) 
      .margins(margin) 
      .dimension(dateDimension) 
      .transitionDuration(500) 
      .elasticY(true) 
      .brushOn(false) 
      .valueAccessor(function (d) { 
       return d.value; 
      }) 
      .title(function(d){return "\nNumber of documents: " + d.key;}) 
      .x(d3.scale.linear().domain([0, maxWeekNumber])) 
      .compose([ 
       dc.lineChart(topicTimeChart).group(topic0) 
      ]); 

dc.renderAll(); 

В настоящее время я только пытаюсь сделать линию для темы = 0, но это не похоже на работу. Любая идея, где я ошибаюсь?

Answer 1

Я не уверен, что проблема с вашим кодом конкретно (если не какая-то переменная, которая была не определена), но у меня это работает, избавившись от .margins и вычисления maxWeekNumber с помощью d3.max. Я получил это работает здесь: http://jsfiddle.net/28epgqn5/2/

var topicTimeChart = dc.compositeChart("#topicsLineChart"); 
var maxWeekNumber = d3.max(indexData, function(d) { return d.weekNumber; }); 
var crossFilterObj = crossfilter(indexData); 
var all = crossFilterObj.groupAll(); 

var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;}); 
var dateDimension = weekSelection.group().reduceCount(function(d){return d;}); 

var topicSelection = crossFilterObj.dimension(function(d){return d.topic;}); 

var topic0 = topicSelection.group().reduceCount(function (d){ 
     if (d == 0) { 
      return d; 
     } 
    }); 

topicTimeChart.width(1200) 
      .height(300) 
      .dimension(dateDimension) 
      .transitionDuration(500) 
      .elasticY(true) 
      .brushOn(false) 
      .valueAccessor(function (d) { 
       return d.value; 
      }) 
      .title(function(d){return "\nNumber of documents: " + d.key;}) 
      .x(d3.scale.linear().domain([0, maxWeekNumber])) 
      .compose([ 
       dc.lineChart(topicTimeChart).group(topic0) 
      ]); 

dc.renderAll(); 

Answer 2

Уменьш функция должна возвращать число, чтобы работать, как и ожидалось из коробки

var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;}); 
var dateDimension = weekSelection.group().reduceCount(function(d){return 1;}); 

var topicSelection = crossFilterObj.dimension(function(d){return d.topic;}); 
var topic0 = topicSelection.group().reduceCount(function (d){return 1;}); 

и вам не нужно будет определить valueAccessor

Начиная с вашим примером в @ vlad003 скрипку:

http://jsfiddle.net/onh3bLnq/