过滤到窄范围时 dc.js 条形图上的颜色问题

Question

我正在制作一个 dc.js 条形图。该图表在其颜色数组中包含三种颜色，具体取决于条形图的值以及它们是否高于、低于或平均数值范围。它使用外部过滤器根据传入的规范重新创建图表值。如果使用外部过滤器将图表的 y 值缩小到相对较小的范围，则条形图将变为单色图表（特别是颜色中的第三种颜色）范围）。进一步检查似乎表明它与 dc.js 过滤无关，但当值的范围足够窄时可能会发生什么。

当范围变宽时颜色会正确变化，但是当范围变窄时，突然所有条都变成相同的颜色。

图表：

 that.ownerChart
            .width(400)
            .height(400)
            .margins({top: 0, left: 10, right: 10, bottom: 20})
            .dimension(that.dims.dOwner)
            .group(that._remove_empty_bins(that.groups.gOwner, (d) => { return d.value.avg; }))
            .ordering(function (x) {
                return x.value.avg * -1;
            })
            .on('filtered', onFilter)
            .fixedBarHeight(30)
            .cap(cap).othersGrouper(false)
            .elasticX(true)
            .renderTitleLabel(false)
            .leftLabel(function(x) {
                return x.key;
            })
            .leftLabelWidth(160)
            //The problematic line might be here
            .colorScale(d3.scale.quantize().range(that.colors));

根据之前的答案进行了编辑。

Answer 1

提供一个工作示例会更容易。也就是说，d3.scale.quantize() 可能会保留未过滤图表中的值域。

我在 dc.leaflet.js 中看到了与 choropleths 类似的问题。无论您是希望颜色始终保持一致，还是缩放到当前域以获得更多对比度，这实际上都是一种设计选择。

您可以使用calculateColorDomain 在每次重绘时重新计算域：

chart.on('preRedraw', function(chart) {
    chart.calculateColorDomain();
});

这将为图表中的所有值调用颜色访问器，并将色标的域替换为颜色值数组。