如何为堆积折线图上的不同线条分配不同的颜色？

如何解决如何为堆积折线图上的不同线条分配不同的颜色？

我有一个使用 dc.js 库创建的折线图。通过调用 stack 方法，折线图基于两个不同的 corssfilter 组。我不想使用 dc.js 提供的默认颜色。如何根据组为这两行分配颜色？这是我用于 React 应用程序的堆叠折线图类的代码。

export default class StackLineChart {
    constructor(_config) {
        this.parentElement = _config.parentElement;
        this.containerID = _config.containerID || "stack-line-chart";
        this.initVis();
    }

    initVis() {
        let vis = this;
        vis.chartContainer = vis.parentElement
                    .append("div")
                    .attr("id",this.containerID)
                    ;

        vis.chart = new dc.LineChart(`#${this.containerID}`);
        vis.chart.width(1200).height(800)
                 .yAxisLabel("Number of Conversation Finished")
             .xAxisLabel("Date")
             .curve(d3.curveCardinal)
             .margins({top: 10,left: 50,right: 10,bottom: 50});
    }

    updateVis(_config) {
        let vis = this;

        vis.chart
           .dimension(_config.dimension)
           .mouseZoomable(true)
           .brushOn(false)
           .x(d3.scaleTime().domain(_config.domain))
           .elasticY(true)
           .legend(dc.legend().x(100).y(10))
           .group(_config.group1,_config.group1_name)
           .valueAccessor(d => d.value)
           .stack(_config.group2,_config.group2_name,d => { return d.value});
        
        vis.renderVis();
    }

    renderVis() {
        let vis = this;
        vis.chart.render();
    }

    resetVis() {
        let vis = this;
        vis.chart.filterAll();
        dc.redrawAll();
    }
}

这是更新图表的代码（即分配组和维度）

    let dim = cf.dimension(d => d.dd_end);
    let minMax = d3.extent(this.state.data,d => d.dd_end);
    let nonUrgentGroup = dim.group().reduceSum(d => d.isNonUrgent);
    let urgentGroup = dim.group().reduceSum(d => d.isUrgent);
    console.log(nonUrgentGroup);
    this.StackLineChartVis.updateVis({
        domain: minMax,dimension: dim,group1: nonUrgentGroup,group1_name: "Non Urgent",group2: urgentGroup,group2_name: "Urgent",})

数据集中字段 isNonUrgent 和 isUrgent 的一些背景，它们可以是 0 或 1。

解决方法

您可以通过 the color scale 设置配色方案。

这是一个序数尺度，所以例如我试过了

.colors(d3.scaleOrdinal(d3.schemeDark2))

在 this fiddle I had open 的顶部图表上。

果然，这会导致图表使用 D3's dark color scheme：