2016-12-06 75 views
1

我有以下使用d3來填充兩個組合框。訂單項目按字母順序從世界

現場演示是在這裏:http://plnkr.co/edit/NRGa5YqvCSNraveH5Ci0?p=preview

如何確保在下拉列表中的國家總是按字母順序排列 - 除了「世界」這應該永遠是第一個項目出現在組合框中?

例如XXX選擇謹以此順序

world 
aruba 
uk 
usa 

下面是代碼:

<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>comboBoxWithRadios</title> 
    <script src="https://d3js.org/d3.v3.js"></script> 
    <style type="text/css"> 
    #projection-menu { 
     left: 5px; 
     top: 45px; 
    } 

    #category-menu { 
     left: 75px; 
     top: 5px; 
    } 
    </style> 
</head> 

<body> 
    <select id="category-menu"></select> 
    <select id="projection-menu"></select> 
    <script type="text/javascript"> 
    var exampleCSV = "comboBoxWithRadios.csv" 
    var defaultCountry = "world"; 



    updateCategoryCombo(); 
    updateGeoCombo(); 

    function updateCategoryCombo(geo) { 

     d3.csv(exampleCSV, function(rows) { 

     var menu = d3.select("#category-menu") 
      .on("change", function() { 
      updateGeoCombo(this.value); 
      }); 
     menu.selectAll("option") 
      .data(d3.map(rows, function(d) { 
      return d.category; 
      }).keys()) 
      .enter() 
      .append("option") 
      .text(function(d) { 
      return d; 
      }); 
     }); 
    }; 




    function updateGeoCombo(categ) { 

     d3.csv(exampleCSV, function(rows) { 
     dta = rows.filter(function(row) { 
      if (row['category'] == categ) { 
      return true; 
      } 
     }); 

     //clear combobox 
     removeOptions(document.getElementById("projection-menu")); 

     var menu = d3.select("#projection-menu") 
      .on("change", changeGeo); 
     menu.selectAll("option") 
      .data(d3.map(dta, function(d) { 
      return d.country; 
      }).keys()) 
      .enter() 
      .append("option") 
      .text(function(d) { 
      return d; 
      }); 
     }); 
    }; 

    function changeGeo() { 
     updateCategoryCombo(this.value); 
    }; 


    function removeOptions(selectbox) { 
     var i; 
     for (i = selectbox.options.length - 1; i >= 0; i--) { 
     selectbox.remove(i); 
     } 
    } 
    </script> 
</body> 

</html> 

回答

3

排序與字的優先級的陣列,或一組的話,你可以使用一個對象作爲排序順序,並使用其他所有單詞的默認值。

var array = ['usa', 'uk', 'aruba', 'world'], 
 
    order = { default: 0, world: -1 }; 
 

 
array.sort(function (a, b) { 
 
    return (order[a] || order.default) - (order[b] || order.default) || a.localeCompare(b); 
 
}); 
 

 
console.log(array);