新手難住select.sort

我是JavaScript和D3的新手。我有條形圖（太多）動畫，但我不能在我的生活中弄清楚如何對數據進行排序，以便條形圖在大小上升或下降，更不用說編寫一個允許用戶重新定位的函數-分類。我嘗試過各種各樣的.sort（function（a，b）{return a.value - b.value;}），但老實說，我甚至不知道鏈中的哪個位置，或者如果這是正確的命令。我需要一個例子，請！新手難住select.sort

鑑於下面的條形圖，摘自D3的Scott Murray教程，我如何在圖表第一次出現之前對圖表進行排序？我將如何訴諸它？僅使用數據集會自動重繪所有svg元素，還是需要使用數據集，然後編寫代碼來重繪元素？（您可以在工作中看到，總初學者在這裏！）

//Width and height 
var w = 500; 
var h = 100; 
var barPadding = 1; 

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 

//Create SVG element 
var svg = d3.select("body") 
.append("svg") 
.attr("width", w) 
.attr("height", h); 

svg.selectAll("rect") 
.data(dataset) 
.enter() 
.append("rect") 
.attr("x", function(d, i) { 
return i * (w/dataset.length); 
}) 
.attr("y", function(d) { 
    return h - (d * 4); 
}) 
.attr("width", w/dataset.length - barPadding) 
.attr("height", function(d) { 
    return d * 4; 
});

任何幫助，不勝感激

約翰

來源

2013-02-25 user2109130

你只是想對數據進行排序，還是我失去了一些東西？

var dataset = [...]; 

dataset.sort(function(a,b){ 
    return a - b; 
}); 

// Create SVG element 
// ...

來源

2013-02-25 23:58:45 findango

是的，我只是想整理，但當單擊按鈕時也使用轉換進行重新排序。我認爲我需要在用d3.selectall.data選擇數據之後執行排序*。如果我按照你的建議做了，我該如何重新排序條形圖而不必從頭開始重繪所有內容？我可能只是迷惑自己。 – user2109130 2013-02-26 00:27:12

您應該能夠重新綁定新的（排序的）數據，然後更新酒吧的所有屬性。這有幫助嗎？ http://jsfiddle.net/findango/94vxf/1/ – findango 2013-02-26 03:53:59

我讀過某處關於一種方式來排序選擇，有點像（在這個例子中）svg.sort（比較器），但我一直沒有能力使其工作。你的例子看起來像我可能能夠理解的東西。感謝堆！約翰 – user2109130 2013-02-26 05:13:13

這是一個在代碼片段中使用d3排序的示例。如果您願意，您可以在他們提供的文檔中閱讀更多關於此的信息。對於d3.js

排序方法： https://github.com/mbostock/d3/wiki/Selections#sort

排序爲javascript的默認Web API方法的一部分： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

dataSet = [{ 
 
    text: 'cancel', 
 
    index: 0, 
 
    icon: 'images/cancel.svg', 
 
    callback: function() { 
 
     _this.cancel() 
 
    } 
 
    }, { 
 
    text: 'previous', 
 
    index: 5, 
 
    icon: 'images/prev-avail.svg', 
 
    callback: function() { 
 
     _this.previousSegment(); 
 
    } 
 
    }, { 
 
    text: 'next', 
 
    index: 2, 
 
    icon: 'images/next-avail.svg', 
 
    callback: function() { 
 
     _this.nextSegment() 
 
    } 
 
    }, { 
 
    text: 'nextAdded', 
 
    index: 2, 
 
    icon: 'images/example.svg', 
 
    callback: function() { 
 
     _this.nextSegment() 
 
    } 
 
    }]; 
 

 
    $('#div1').html(JSON.stringify(dataSet)); 
 

 
    dataSet.sort(function(a, b) { 
 
    return a.index - b.index 
 
    }); 
 

 
    $('#div2').html(JSON.stringify(dataSet));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="div1"></div> 
 
<br/> 
 
<div id="div2"></div>

來源

2015-11-13 18:12:26 JosephMCasey

新手難住select.sort

回答

相關問題