D3: Как показать только верхние 3 из 6 элементов в гистограмме?

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 + ")"; });