javascript - 过滤到较窄范围时 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();
});

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