d3.js - 在图表中对数据进行分组

Question

我该如何在d3中显示我的条形图，以展示每个区域收到的奖金总额的汇总情况？使用以下数据格式：

{
School: "PS 1",
Borough: Q,
Award: 1000
},
{
School: "PS 2",
Borough: Q,
Award: 3000
},
School: "PS 4",
Borough: X,
Award: 3000
}

目前，我的柱状图按X轴组织为学校名称，Y轴为奖项金额。但我希望能够显示每个行政区的奖项金额。

代码片段：

        var manhattanList = [];
    var queensList = [];
    var brooklynList = [];
    var statenIsList = [];
    var bronxList = [];

    for (i=0; i<data.length; i++) { 
        if (data[i].boro === "M") {
            manhattanList.push(data[i])

        } else if (data[i].boro == "Q") {
            queensList.push(data[i])
        } else if (data[i].boro == "X") {
            bronxList.push(data[i])
        } else if (data[i].boro == "R") {
            statenIsList.push(data[i])
        } else {
            brooklynList.push(data[i])
        }
    };

     var width = 1000;
    var height = 10000;

    // creating scales:
    var widthScaled = d3.scale.linear()
                    .domain([0, 83300000]) // data space
                    .range([0, width]); // pixel space

    var colorScale = d3.scale.linear()
                    .domain([0, 83300000])
                    .range(["red", "blue"]);

    // creating an axis - using our width scale
    var axis = d3.svg.axis()
                .ticks(10) // specifying how many "ticks" you want in your x
                .scale(widthScaled); // scalling your x axis by canvas size

    var canvas = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(100, 100)")
        .call(axis);


    canvas.selectAll("rect")
        .data(data)
        .enter()
            .append("rect") // append rect for each data element
                .attr("width", function(d) { return widthScaled(+d.award); })
                .attr("height", 48)
                .attr("y", function(d, i) { return i * 50; })
                .attr("fill", function(d) { // randomizing bar colors
                    return "hsl(" + Math.random() * 360 + ",60%,80%)"
                 });

    canvas.selectAll("text")
        .data(data)
        .enter()
            .append("text")
            .attr("fill", "white")
            .attr("y", function(d, i) { return i * 50 + 24; }) // where the text is placed
            .text(function (d) { return d.name; })




    });         

这是我的JSBIN代码链接：https://jsbin.com/hiruci/edit?html,output。

- codinginnewyork

---

请参考 使用d3制作分组条形图。 - Gilsha

Answer 1

要按区划将您的数据进行映射，您可以使用如下的d3.nest方法。它是一个方便的方法，可以让您将数据转化为所需的层次结构。

    d3.json("https://data.cityofnewyork.us/resource/8586-3zfm.json", ready);

    function ready(error, data){

        if ( error ) {
            console.warn("ERROR: " + error);
        }

        var dataFormatted = d3.nest()
            .key(function(d) { return d.boro; })
            .map(data);

        console.log(data);
        console.log(dataFormatted);
    }

- daramao