DC.js xAxis範圍，僅顯示子集

在下面的示例中，將xAxis調整爲僅顯示「Number of Events Magnitude」的2 - max的最佳方法是什麼？DC.js xAxis範圍，僅顯示子集

dc.js chart example, New Zealand Earthquakes

2016-12-04 C. Wolcott

這個答案擴展了@赫拉爾多的解決方案，使圖表動態調整，以及處理一些DC。 js怪癖。

首先，這個例子的原作者冒充了一些東西只是爲了讓東西工作。如果你想真正的動態軸，你需要證明dc.js如何計算欄寬度爲自己：

magnitudeChart 
    .xUnits(dc.units.fp.precision(0.1))

，並刪除.gap(65) - 那種神奇的數字始終是一個跡象，表明有人不能弄清楚如何自動計算事物。

dc.js如何處理條形圖有幾個怪癖。首先，當它設置域時，它並沒有真正考慮它自己的橫條寬度或居中 - 它完全使用你給它的東西。自動計算最大值時，您會注意到最右側的小柱已丟失。（這也發生在elasticX(true)。）

因此，讓我們關閉條形居中並在我們每次計算它時將0.1條寬度添加到域。

magnitudeChart 
    .centerBar(false) 
    .x(d3.scale.linear().domain([2, d3.max(data, d=>d.mag)+0.1]))

接下來，crossfilter不會自動刪除空箱，所以我們可以包裝組中的fake group做到這一點：

function remove_empty_bins(source_group) { 
    return { 
     all:function() { 
      return source_group.all().filter(function(d) { 
       return d.value != 0; 
      }); 
     } 
    }; 
} 

magnitudeChart 
    .group(remove_empty_bins(magValueGroupCount))

我們可以有圖表重新計算其領域每它的重繪時間像這樣：

.on('preRedraw', function(chart) { 
    chart.x().domain([2, d3.max(chart.group().all(), kv=>kv.key) + 0.1]); 
    chart.rescale(); 
});

塊的叉：http://bl.ocks.org/gordonwoodhull/7675bb4bb67354cfdc7c6841106d7b31

來源

2016-12-04 12:50:44 Gordon

偉大的解剖的例子。這將有很大幫助。 –

優秀的解釋。你是dc的創造者，對吧？ –

不，我剛剛維持了幾年。儘管我喜歡這兩項活動，但我認爲我從回答問題中學到的東西比從編碼中學到的要多。 :-) – Gordon

改變這一行：

.x(d3.scale.linear().domain([0.5, 7.5]))

要：

.x(d3.scale.linear().domain([2, d3.max(data, d=>d.mag)]))

來源

2016-12-04 04:29:35

感謝您對日快速響應。這使我指出了正確的方向。如果我想要序數或線性x尺度，我還沒有想過。回顧我的數據，我確實想要序數。 –

@ C.沃爾科特將我的答案取消爲接受的答案，並標記戈登的一個。 –

DC.js xAxis範圍，僅顯示子集

回答

相關問題