легенда этикетки и цвета меняются на черный dc.js d3.js

Question

У меня есть Композитные диаграммы с двумя линиями, построенных с помощью следующего кода:

function fakeGrouper(source_group) { 
       return { 
        all:function() { 
         var cumulate = 100; 
         var result = []; 
         return [{key: 0, value: cumulate}] 
          .concat(source_group.all().map(function(d) { 
           cumulate -= d.value; 
           return {key:d.key, value:cumulate}; 
          })); 
        } 
       }; 
      } 

var recDim = cf1.dimension(dc.pluck('recidiefNa')); 
       var recGroup = recDim.group().reduceCount(); 
       var RecGroup = fakeGrouper(recGroup); 
       var resDim = cf1.dimension(dc.pluck('residuNa')); 
       var resGroup = resDim.group().reduceCount(); 
       var ResGroup = fakeGrouper(resGroup); 


      var scChart = dc.compositeChart("#scStepChart"); 
      scChart 
      .width(600) 
      .height(400)    
      .x(d3.scale.linear().domain([0,52])) 
      .y(d3.scale.linear().domain([0,100])) 
      .clipPadding(10) 
      .brushOn(false) 
      .xAxisLabel("tijd in weken") 
      .yAxisLabel("percentage vrij van residu/recidief") 
      .legend(dc.legend().x(70).y(250).itemHeight(13).gap(5)) 
      .compose([ 
       dc.lineChart(scChart) 
        .dimension(recDim) 
        .group(RecGroup) 
        .renderDataPoints(true) 
        .interpolate("step-after") 
        , 
       dc.lineChart(scChart) 
        .dimension(resDim) 
        .group(ResGroup) 
        .colors(['#ff9933']) 
        .renderDataPoints(true) 
        .interpolate("step-after") 
       ]) 
      .xAxis().ticks(4); 
      scChart.render(); 

Что делает идеально для того, что легенда имеет 0, за исключением ярлык для обоих диаграмм. Проверьте мою скрипку здесь: http://jsfiddle.net/8v9faput/

Теперь я где-то читал, что вы можете решить эту проблему путем изменения группы из:

.group(GROUP) 

в

.group(GROUP, LABELNAME) 

Однако, как только я сделал это второй график пошел черный в легенде, и линии исчезли на графике. как показано на этой второй скрипке. http://jsfiddle.net/ojdg3ny1/

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

Answer 1

Вы передаете массив .colors(). Вы должны передать это одно значение, как так:

.colors('#ff9933') 

Таким образом, вы функциональная схема выглядит следующим образом:

.legend(dc.legend().x(70).y(250).itemHeight(13).gap(5)) 
       .compose([ 
        dc.lineChart(scChart) 
         .dimension(recDim) 
         .group(RecGroup, "Recidief") 
         .colors('red') 
         .renderDataPoints(true) 
         .interpolate("step-after") 
         , 
        dc.lineChart(scChart) 
         .dimension(resDim) 
         .group(ResGroup, "Residu") 
         .colors('#ff9933') 
         .renderDataPoints(true) 
         .interpolate("step-after") 
        ]) 
       .xAxis().ticks(10) 
       scChart.render(); 

Изменено скрипку: http://jsfiddle.net/reko91/8v9faput/1/