D3：如何在條形圖中只顯示6項中的前3項？

Question

我是D3的一個極端新手。我正在用LeafletJS內置的網絡地圖工作，並在一個彈出窗口中放置了一個D3條形圖，顯示了阿富汗一個地區的各種族羣。在我的真實項目中，我在該地區擁有超過26個民族，我只想在條形圖中顯示前3個最大的族羣。

我已經成立了demo in jsfiddle現在只有6個民族。

我如何只顯示我的條形圖中排名前3位的最大族羣並隱藏其他族羣？我的JSON數據

例子：

var myData = [{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Name":"Gulran","Province":"Hirat","Ethnic1":0.19,"Ethnic2":0.32,"Ethnic3":"0.10","Ethnic4":"0.00","Ethnic5":"0.10","Ethnic6":"0.00"},"geometry":{"type":"Polygon","coordinates":[[[60.941162109375,29.897805610155874],[61.92993164062499,31.034108344903512],[63.34716796874999,31.3348710339506],[64.05029296875,30.401306519203583],[64.412841796875,29.735762444449076],[64.09423828125,29.36302703778376],[62.29248046875,29.36302703778376],[60.941162109375,29.897805610155874]]]}},{"type":"Feature","properties":{"Name":"Chahar Burjak","Province":"Nimroz","Ethnic1":0.25,"Ethnic2":0.12,"Ethnic3":0.03,"Ethnic4":0.01,"Ethnic5":"0.00","Ethnic6":"0.00"},"geometry":{"type":"Polygon","coordinates":[[[63.38012695312499,31.3348710339506],[65.06103515625,31.80289258670676],[65.6982421875,31.156408414557],[66.016845703125,30.467614102257855],[65.291748046875,30.164126343161097],[64.22607421875,30.0405664305846],[63.38012695312499,31.3348710339506]]]}}]}]; 

我D3代碼：

var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg></div>')[0]; 

     var popup = L.popup({minWidth: 600}).setContent(div); 
     layer.bindPopup(popup); 

     var values = feature.properties; 
     var data = [ 
      {name:"Ethnic1",value:values["Ethnic1"]}, 
      {name:"Ethnic2",value:values["Ethnic2"]}, 
      {name:"Ethnic3",value:values["Ethnic3"]}, 
      {name:"Ethnic4",value:values["Ethnic4"]}, 
      {name:"Ethnic5",value:values["Ethnic5"]}, 
      {name:"Ethnic6",value:values["Ethnic6"]} 
     ]; 

     var margin = {top: 20, right: 30, bottom: 40, left: 40}, 
      width = 600 - margin.left - margin.right, 
      height = 400 - margin.top - margin.bottom, 
      barHeight = height/data.length; 

     var formatPercent = d3.format(".0%"); 


     var x = d3.scale.linear() 
      .domain([0, d3.max(data, function(d){return d.value;})]) 
      .range([0, width]); 
     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom") 
      .tickFormat(formatPercent); 

     var svg = d3.select(div).select("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
      .classed("chart", true); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     var bar = svg.selectAll("g.bar") 
      .data(data) 
      .enter() 
      .append("g") 
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

     bar.append("rect") 
      .attr("width", function(d){return x(d.value);}) 
      .attr("height", barHeight - 1); 

     bar.append("text") 
      .attr("x", function(d) { return x(d.value) - 3; }) 
      .attr("y", barHeight/2) 
      .attr("dy", ".35em") 
      .text(function(d) { return d.name; }); 

Answer 1

這裏是Working Fiddle你。

和所使用的代碼如下

function GetTopThreeEthnic(arrayData){ //sorting to top 3 function 
    arrayData.sort(function(a, b) { 
        return parseFloat(b.value) - parseFloat(a.value); 
       }); 
    return arrayData.slice(0, 3); 
} 

而只是對這個函數的調用初始化你data變量之後。

var data = [ 
        {name:"Ethnic1",value:values["Ethnic1"]}, 
        {name:"Ethnic2",value:values["Ethnic2"]}, 
        {name:"Ethnic3",value:values["Ethnic3"]}, 
        {name:"Ethnic4",value:values["Ethnic4"]}, 
        {name:"Ethnic5",value:values["Ethnic5"]}, 
        {name:"Ethnic6",value:values["Ethnic6"]} 
       ];     
    data = GetTopThreeEthnic(data); // this is the code added 

Answer 2

你這樣做是首先對數據進行排序的方式。排序後，您可以過濾數據以僅使用前3個值來創建條形圖。

我已經分叉你的小提琴。這裏是鏈接https://jsfiddle.net/ankit89/x8u31jdo/

我添加的代碼中的重要部分/體改被

 var sortedData = data.sort(function(a,b){ 
     return b.value - a.value; 
     }); 

     //if you want to just keep top three 
     sortedData = sortedData.filter(function(d,i){ 
     return i < 3; 
     }); 

     var bar = svg.selectAll("g.bar") 
      .data(sortedData) 
      .enter() 
      .append("g") 
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });