將dc.js條形圖上的顏色問題過濾爲窄範圍時

我正在研究dc.js條形圖。根據條形圖的值以及它們是否在上面，圖表在其顏色數組中有三種顏色，低於或平均數值範圍。它使用外部過濾器，根據傳入的規格重新創建圖表值。如果使用外部過濾器將圖表的y值縮小到相對較小的範圍，則該條形成單個彩色圖表（特別是顏色中的第三種顏色範圍）。進一步的檢查似乎表明它與dc.js過濾無關，但可能會發生什麼情況，當值的範圍足夠窄時。將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));

編輯爲清楚起見基於以前的答案。

來源

2016-11-03 Paige

幫助一個工作示例會更容易。也就是說，這可能是d3.scale.quantize()保留未過濾圖表中的值域。

我在dc.leaflet.js中看到了與choropleths類似的問題。這實際上是一種設計選擇，無論您希望顏色始終保持一致，還是要縮放到當前域以獲得更多對比。

您可以使用calculateColorDomain重新計算每個重繪域：

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

這將調用圖表中的所有值的色彩訪問，並與顏色值的陣列替代色階的域。

來源

2016-11-10 10:54:58 Gordon

Hey Gordan，謝謝你的回答。我試着實現它，但似乎我的問題與我第一次描述的稍有不同。代碼實際上已經在過濾器上重新創建了圖表，因此計算顏色域似乎不成問題。無論這一行是否在範圍足夠小時立即添加，似乎都會出現單一顏色。 – Paige

嗯，我想我很難知道你在說什麼，卻看不到一個跑步的例子。但'd3.scale.quantize（）'是一種高級舍入形式，所有剩餘的值可能足夠接近以致它們會崩潰到相同的值？ – Gordon

這絕對可以。謝謝。對不起，我沒有正確刪除的工作版本給你。 – Paige

將dc.js條形圖上的顏色問題過濾爲窄範圍時

回答

相關問題