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中看到过类似的问题。无论您是希望颜色始终保持一致，还是缩放到当前域以获得更高对比度，它实际上都是一种设计选择。

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

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

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

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

1 个答案: