我該如何解決這個條形圖排序問題？

Here is a JSFiddle我目前面臨的問題。我該如何解決這個條形圖排序問題？

基本上，我有一個對象的數組，我用來繪製一些酒吧。在對數組進行排序後，我嘗試相應地更新小節'y的位置，但這不起作用。

所以，這是我用來繪製酒吧規模：

var yScale = d3.scale.ordinal() 
    .domain(d3.range(0, numberOfBars)) 
    .rangeBands([0, numberOfBars * barHeight]);

所以，如果我有3間酒吧和酒吧爲40像素高，然後我映射0-3 => 0-120px 。

接下來，我有一個使用這種規模返回家園的權利y位置的功能：

var y = function(d, i) { 
    return yScale(i); 
};

繪圖使用此y功能酒吧之後，我再對數據進行排序數組，並嘗試重新繪製吧：

barsContainer.selectAll('.bar') 
    .data(chartData.users) 
    .transition() 
     .duration(750) 
     .delay(delay) 
     .attr('y', y); // Not working. I thought this would order the bars. 
     //.attr('y', 120); // This works though. It moves all the bars to this y.

這是我難倒的地方。由於我重新排列了數組（chartData.users），並且由於條與數據「連接」，因此根據數據在數組中的新位置，條不應該更改其y？

來源

2013-11-15 Ashitaka

[This Sample]（http://jsbin.com/ijepod/1/edit）可能會幫助 – functionoid

謝謝！這是最受歡迎的。所以我不需要對數組進行排序，然後通過'data（）'函數將其綁定到數據上，我只需要在條上調用'sort（）'函數。如果你想提交某種答案，我會很樂意接受它。 – Ashitaka

我很高興它爲你工作。既然你自己想出了自己，你應該得到信用。如果您發現評論有幫助，您可以投票評論。 – functionoid

所以我想出了問題所在。由於我正在對一個對象數組進行排序，D3.js本身無法弄清哪個數組對象與哪個DOM對象匹配。所以我不得不創建一個關鍵功能來識別的對象：

var key = function(d) { return d.id }

然後，所有我所要做的就是調用data()使用這個鍵的功能，然後order()，所以DOM順序的排列順序一致：

barsContainer.selectAll('.bar') 
    .data(chartData.users, key) 
    .order() 
    .transition() 
    .delay(delay) 
    .duration(750) 
    .attr('y', y);

Here's the working JSFiddle。

來源

2013-11-16 13:18:28 Ashitaka

Your Fiddle is very long。我建議把它恢復到最低水平，並尋求幫助。

例如，嘗試測試

console.log(chartData.users)

你聲明chartData之後。它看起來與排序的相同，所以它可能不是排序錯誤。如果你自己做更多的工作，然後問一個更具體，更簡潔的問題，你可能會得到更多的答案。

祝你好運D3！

來源

2013-11-15 11:03:40

我已經減少了大量的代碼，你應該看到真正的腳本大聲笑。這只是'setTimeout'函數內部的代碼，這真的很重要。是的，奇怪的是陣列是相同的，但它們不是。如果你刪除了setTimeout函數，你會發現數組以[[50，30，40]開始）（就像繪製條形圖一樣），只有在setTimeout函數內部，它纔會被命令爲[[50，40，30 ]'。 – Ashitaka

我該如何解決這個條形圖排序問題？

回答

相關問題