如何排序分組條形圖d3js V4

在這種block（固定）我試圖以類似的方式做一個排序功能this。如何排序分組條形圖d3js V4

它在技術上對酒吧進行排序，但不是以預期的方式進行排序，如果您選中排序複選框並轉換年份，您可以查看我的意思。

我認爲它有事可做的事實，它只是排序基於data而不是keys和/或copy可變的，但我已經試過各種基於所提到的變量的方式排序沒有任何成功。

不知道我錯過了什麼，感謝任何幫助！

2017-10-18 Robert Andersson

似乎你是按「總」價值排序，並根據這一點，酒吧似乎是正確的。你是否希望每個小組的欄都根據它們的值進行排序？ – Shashank

正如我在我的問題中提到的那樣，這些小節在技術上是排序的，但並不像在另一個例子中那樣。如果您切換複選框並更新了該複選框，則更新數據（並切換排序複選框）時，條形圖不會像在[此處]一樣更改x位置（https://bl.ocks.org/LemoNode/73dbb9d6a144476565386f48a2df2e3b）數據。至於你的問題，不，只關心每個組的總價值排序，因爲它的確如此。希望我有道理。 –

是@Robert！我知道了。我的錯。我會盡快添加一個解決方案的鏈接！ – Shashank

在這裏，你去！你以前的代碼沒有太多的改變。

Plunker

因此，這是有關數據綁定到barGroups。每次對數據進行排序或更改時，都會將新數據綁定到「g.layer」，並使用d3的更新方法，這就是它的工作原理。

變化的新的代碼：

移至barGroups碼的數據與上面沒有變換屬性排序。
在定義了x0域後，將轉換屬性添加到組中。

相關代碼：

上的排序功能：

// bars 
let barGroups = g.selectAll("g.layer").data(data); 
barGroups.enter().append("g") 
    .classed('layer', true); 

barGroups.exit().remove();

一旦X0域設置：

g.selectAll("g.layer").transition().duration(Globalvar.durations) 
    .attr("transform", function(d, i) { 
    return "translate(" + x0(d.State) + ",0)"; 
    });

希望這有助於！ :)

來源

2017-10-19 14:54:57 Shashank

非常好！感謝您的解釋。 –

如何排序分組條形圖d3js V4

回答

相關問題