Question

我有一些数据。它看起来像这样（但数组中有数百个对象而不是3个）：

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

我想要做的是绘制一个矩形，其高度对应于数据中具有特定id值的项目数。因此，例如，如果数据数组中有300个项目，其中id为＆＃34; 1＆＃34;则矩形将为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')

Answer 1

你需要做两件事：

1）将您的ID分组以获得计数

2）将计数值设置为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);
}

检查控制台日志，可以帮助您更好地理解阵列。

Demo JSFiddle

计算d3.js中的数据项

1 个答案: