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

Question

我正在处理一个dc.js条形图chart.The图表，它的颜色数组中有三种颜色，根据条形图的值以及它们在数值范围内是高于、低于还是平均。它使用外部过滤器，根据传入的规范重新创建图表值。如果使用外部筛选器将图表的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();
});

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