图例标签和颜色变为黑色 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 作为两个图表的标签外，它呈现得非常完美。在这里查看我的 fiddle：http://jsfiddle.net/8v9faput/

现在我在某处读到，您可以通过更改组来解决此问题：

.group(GROUP)

到

.group(GROUP, LABELNAME)

但是一旦我这样做了，图例中的第二张图表就变黑了，图表中的线条也消失了。如本秒所示fiddle。 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();

已更新 fiddle：http://jsfiddle.net/reko91/8v9faput/1/

图例标签和颜色变为黑色 dc.js d3.js

legend labels and colors change to black dc.js d3.js

data-visualization

d3.js

crossfilter

dc.js