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

【问题标题】：How to assign different color to different line on a stacked line chart?如何为堆积折线图上的不同线条分配不同的颜色？
【发布时间】：2021-06-25 05:20:06
【问题描述】：

我有一个使用 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。

【问题讨论】：

标签： d3.js dc.js

【解决方案1】：

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

这是一个序数比例，例如我试过了

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

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

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

【讨论】：