在dc.js柱状图上的颜色问题，当过滤到一个狭窄的范围

Color issue on dc.js bar chart when filtered into a narrow range

本文关键字：范围 一个 过滤 js dc 问题 颜色      更新时间：2023-09-26

我正在制作一个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));

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

我在dc.leaf .js中看到过类似的绒毛问题。这实际上是一个设计选择，你是否希望颜色始终保持一致，或缩放到当前的域，以获得更多的对比。

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

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

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

相关文章：