统计d3.js中的数据项

Counting data items in d3.js

本文关键字：数据项 js d3 统计      更新时间：2023-09-26

我有一些数据。它看起来像这样(但是数组中有几百个对象，而不是三个):

var data = [
{
    id: "1",
    name: "Name1",
    color: "Color1"
},
{
    id: "2",
    name: "Name2",
    color: "Color2"
},
{
    id: "1",
    name: "Name3",
    color: "Color3"
}

我要做的是画一个矩形，它的高度对应于数据中具有特定id值的项数。因此，例如，如果数据数组中有300个项目，id为"1"，则矩形将是300像素高。

显然我可以遍历数组并计算它们，但我想知道d3.js中是否有更简单/更短的方法。

我想到的可能是这样的:

svg.selectAll('rect').data(data).enter()
    .append('rect')
        .attr('x', 800)
        .attr('y', 800)
        .attr('height', //SOME CODE HERE)
        .attr('width', 5)
        .attr('fill', 'red')

您需要做两件事:

1)将您的Id分组以获得计数

2)将count值设置为d3 rect的高度属性

下面的代码将通过索引对id进行分组。groupId的长度将是数据中常见id的计数:

var groupId = [];
var maxId = 0;
for (var i = 0; i < data.length; i++){
    var item = data[i];
    if (!groupId[item.id]){
        groupId[item.id] = [];
    }
    groupId[item.id].push({name: item.name, color:item.color});
    if (maxId < item.id){
        maxId = item.id;
    }
}

然后是d3 

//Make an SVG Container
var svgContainer = d3.select("body").append("svg").attr("width", 200).attr("height", 200);
for (var i = 1; i <= maxId; i++){
    console.log("length of groupId is " + groupId[i].length);
    console.log("Id is " + i);
    for (var j = 0; j < groupId[i].length; j++){
         console.log("name is " + groupId[i][j].name + " color is " + groupId[i][j].color);
    }
    console.log("===========================");
 //Draw the Rectangle
 var rectangle = svgContainer
                 .append("rect")
                 .attr("x", i*10)
                 .attr("y", i)
                 .attr("width", 5)
                 .attr("height", groupId[i].length);
}

检查控制台日志，将帮助您更好地理解数组。

演示JSFiddle

相关文章：