dc.js设置子条形图的颜色

Question

我正在尝试在单击时设置合成图中的条形图的颜色，但是renderlet出现问题。

dimensions={
    {"Data1": ["line", AppStyles.color.warning], 
     "Data2": ["line", AppStyles.color.danger], 
     "Data3": ["bar", AppStyles.color.blue]
    }
}

formatData = (data) => {
    let formattedData = [];
    for(let key in data) {
        formattedData.push({
            ...data[key],
            x: this.parseDate.parse(data[key].x)
        })
    }
    return formattedData;
}

componentDidMount(){
    let data = this.formatData(this.props.data);
    this.ndx = crossfilter.crossfilter(data);
    this.chart = dc.compositeChart(this.multiLineChartContainer);
    this.dimension = this.ndx.dimension((d) => {
        return d.x;
    });
    let minDate = this.dimension.bottom(1)[0].x;
    let maxDate = this.dimension.top(1)[0].x;

    let composeGroup = [];
    Object.keys(this.props.dimensions).map((dim,i) => {
        let grp = this.dimension.group().reduceSum((d) => {
            return d[dim];
        });
        if(this.props.dimensions[dim][0] === "bar"){
            composeGroup.push(dc.barChart(this.multiLineChartContainer)
            .group(grp, dim)
            .colors("blue")
            .centerBar(true)
            .renderlet((chart) => {
                chart.selectAll('rect.bar').on('click', (event)=>{
                    console.log("clicked rect")
                    chart.colorAccessor(function(d){
                        console.log(d.key);
                        return d.key
                    }).colors(d3.scale.ordinal().domain(Object.keys(this.props.dimensions))
                    .range(['blue', '#5C5ED7', 'red', AppStyles.color.warning]))
                })
            })
            )
        } else {
            composeGroup.push(dc.lineChart(this.multiLineChartContainer)
            .group(grp, dim)
            .colors(this.props.dimensions[dim][1])
            .useRightYAxis(true)

        );
        }
    });

    this.chart.width(this.props.width)
    .height(this.props.height)
    .renderHorizontalGridLines(true)
    .x(d3.time.scale().domain([minDate, maxDate]))
    .elasticY(true)
    .elasticX(true)
    .xAxisLabel("Cohort")
    .brushOn(false)
    .yAxisLabel("Left")
    .rightYAxisLabel("Right")
    .xUnits(()=>{
        return 30;
    })
    .legend(dc.legend().x(this.chart.width()- 130))
    .compose(composeGroup)

    this.chart.renderlet((chart) => {
        chart.selectAll('circle, rect.bar').on("click", (event) => {
            this.props.dataSelect(event);
          });
    });
    this.chart.xAxis().ticks(5)
    this.chart.render();
}

我尝试过向子图中添加一个renderlet，但是它从未被调用过。现在，我将重新渲染整个图表，并将transitionDuration设置为0，只是为了重新分配颜色。这真的是最好的方法吗？