D3：如何在条形图中只显示 6 个项目中的前 3 个？

Question

我是 D3 的极端新手。我正在使用在 LeafletJS 中构建的网络地图，并将 D3 条形图放入弹出窗口中，显示阿富汗一个地区的各个民族。在我的真实项目中，该地区有超过 26 个民族，我只想在条形图中显示前 3 个最大的民族。

我设置了一个demo in jsfiddle，目前只有6个种族。

如何在我的条形图中只显示前 3 个最大的族群并隐藏其余的族群？

Example of my JSON data:

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]]]}}]}];

My D3 code:

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

你的做法是先对数据进行排序。排序后，您可以过滤数据以仅使用前 3 个值来创建条形图。

我已经分叉了你的fiddle。这里是linkhttps://jsfiddle.net/ankit89/x8u31jdo/

我 added/modifed 的重要代码是

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

Answer 2

这是给你的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

D3：如何在条形图中只显示 6 个项目中的前 3 个？

D3: How to show only top 3 of 6 items in bar chart?

javascript

d3.js

leaflet