crossfilter，d3.brush和nvd3整合

我已經看過了crossfilter主頁crossfilter，d3.brush和nvd3整合

而且真的很喜歡這是怎麼回事。但如果我不需要，我不想手寫所有的圖表。我已經看過dc.js這是相當不錯的，並給你內置的crossfilter集成和過濾。

但是dc缺少一些我需要的東西，我從nvd3中得到。然而，通過crossfilter進入/在nvd3的頂部獲取任何類型的交叉圖過濾（刷或點擊等取決於圖的類型）看起來像很多工作。我沒有看到或聽說任何類型的這項工作在任何地方進行，但它看起來像nvd3的自然進展。

添加交叉圖過濾和交叉過濾到nvd3容易，我只是忽略了一個簡單的去做呢？

人們是如何完成這個的？

謝謝。

來源

2013-09-30 lostdorje

我不知道有任何這樣的整合。如果很容易，完全取決於你對簡單的定義;如果不熟悉組件，我當然不會嘗試它。 –

我現在做的事情完全一樣，nvd3有一些漂亮的圖表，但沒有過濾器，dc.js過濾數據很好，但不是很漂亮。你能聯繫我嗎，我們可以分享一些經驗嗎？ [email protected]。謝謝！ –

DC很不錯，因爲您可以將維度和組直接傳遞給圖形對象本身，而且您不必手動更新交叉過濾器的更改。

如果您想將Crossfilter和NVD3連接在一起，則需要手動更新NVD3域/範圍或更改交叉過濾器尺寸/組狀態的數據。這基本上是Crossfilter頁面示例如何檢查源代碼的方式：http://square.github.io/crossfilter/。每當畫筆改變時，圖形都會重新繪製並更新以反映更改。

獲取NVD3圖表重繪和反映新數據非常簡單。您可以更新基準並再次調用條形圖...例如。

var svg = d3.select("body").append("svg").style("height", "500px"); 
var barChart = nv.models.multiBarChart(); 

// Just execute this block each time the chart data changes 
// and the chart will update in a nicely animated manner 
svg 
    .datum(chartData) 
    .transition() 
    .duration(500) 
    .call(barChart);

棘手的部分實際上是如果你想有刷到NVD3圖表的內置。這可能會變得棘手，因爲你必須保持刷子與NVD3圖表同步，因爲它們的數據被改變以便它們正確繪製，但是如果你只是想根據另一個圖表的刷子事件正確地更新NVD3圖表，或者你根本不在乎刷子，它根本不應該太難。在刷子上的很好的教程是在這裏：http://bl.ocks.org/mbostock/1667367

即使這麼說，NVD3即將暴露幾乎所有的底層圖表組件的非常好的（尺度，軸等），這意味着你可以訪問，添加和更新根據需要刷新，然後註冊畫筆事件，更新交叉過濾器，然後根據需要重新繪製圖表。

它也是開源的，所以你的其他選擇是分叉repo並直接將畫筆支持和事件添加到源代碼。

就我個人而言，我製作了一個自定義時間表圖表，當刷子更新時使用刷子和觸發事件。在這些事件上，我隨後更新了NVD3堆積條形圖的數據並重新繪製。因此，當您更改時間軸過濾器時，條形圖會進行動畫和更新。在行動中看到它很光鮮。

無論哪種方式，聽起來都像是一個有趣的挑戰。祝你好運！

來源

2013-09-30 14:01:06 reblace

感謝您的回答。我可以試試看。關於Square（crossfilter），他們也有一個非常漂亮的儀表板，裏面裝滿了圖表。可以刷新/過濾圖形自動更新其他圖形。此外，當懸停在各個酒吧上方時，會彈出工具提示。可悲的是，nvd3並沒有提供集成的交叉過濾，而dc在使用筆刷的時候提供了這個功能，因爲筆刷夾層，懸停工具提示會被禁用。我真的很想擁有筆刷和工具提示。我可能不得不推出自己的。 – lostdorje

crossfilter，d3.brush和nvd3整合

回答

相關問題