仅显示带有d3.js的条形图中的前25个数据项

时间:2017-08-21 21:34:25

标签: javascript d3.js

您好我有一个包含1000个项目的大型数据集,我只想在条形图中显示前25个项目。我有条形图工作,但它显示所有1000项。

这是我的d3代码

d3.json(myData, function (data) {

    var width = 1150;
    var height 5000;

    //Create the canvas
    var canvas = d3.select("#barChart") 
        .append("svg")                  
        .attr("width", width)
        .attr("height", height);        


    //Create the rectangles for the bar chart
    canvas.selectAll("rect")
        .data(data.results)             
        .enter()                   
        .append("rect")                 
        .attr("width", 500)
        .attr("height", 15)            
        .attr("y", function(d, i) {
            return i * 25;
        })


});

我曾与试图做

之类的事情的data(data.results)部分混在一起
.data(data.results, function(d,i) {
    return i < 25;
}) 

但是不能让它发挥作用。

有什么想法吗?

由于

P.S数据看起来像这样:这只是1000的前4位。

{
  "meta": {
    "last_updated": "2017-08-19"
  },
  "results": [
    {
      "term": "term1",
      "count": 1569
    },
    {
      "term": "term2",
      "count": 1375
    },
    {
      "term": "term3",
      "count": 1372
    },
    {
      "term": "term4",
      "count": 1208
    }
  ]
}

1 个答案:

答案 0 :(得分:2)

假设您的数据是一个数组,请尝试使用“数据”作为您的数组的data.slice(0, 25)

编辑:使用您的数据结构,您可以执行results.slice(0, 25)并使用它。