使用对象数组向D3图表

Question

我是D3的新手，我在使用数据和构建图表时遇到了麻烦。我正在根据一些用户定义的信息构建一个可配置的图表。这我可以处理没问题。我已经有了代码来设置它，但是我在D3图表中将它们全部放在一起时遇到了麻烦。

现在相关数据存储在一个对象数组中，所有基于变量的信息都很好，并显示了我想要显示的内容。

出于某种原因，我无法使用codepen，但这里是代码：http://codepen.io/jacob_johnson/pen/rLWVpR

下面还提供了一些相关代码：

当前控制台输出：

Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 5632 more… ] test_page.html:141:3
Object { Institution: "For-profit", Currently owe debt; behind: 13.168724279835391, Currently owe debt; not behind: 21.39917695473251, Paid off: 63.78600823045267 } test_page.html:158:3
Object { Institution: "Nonprofit", Currently owe debt; behind: 2.548725637181409, Currently owe debt; not behind: 16.19190404797601, Paid off: 80.20989505247377 } test_page.html:159:3
Object { Institution: "Public", Currently owe debt; behind: 2.6679371129109097, Currently owe debt; not behind: 13.101476893758932, Paid off: 83.42067651262506 }

测试表输出到HTML的图像：http://i.imgur.com/DkVmlTX.png

我的JS部分代码：

var minAge = 30,        // Minimum age for relevant data
    maxAge = 32;        // Maximum age for relevant data

var control = [],       // All rows in 'control' column
    SL1 = [],           // All rows in 'SL1' column
    SL6 = [],           // All rows in 'SL6' column
    ppage = [],         // All rows in 'ppage' column
    ppethm = [];        // All rows in 'ppethm' column

var c_priv = 0,         // Private institution
    c_pub = 0,          // Public institution
    c_privp = 0;        // Private for-profit institution

var priv_behind = 0,
    priv_ontime = 0,
    priv_paid = 0;

var pub_behind = 0,
    pub_ontime = 0,
    pub_paid = 0;

var privp_behind = 0,
    privp_ontime = 0,
    privp_paid = 0;

// Array supply graph data
var FOR_PROFIT = {};
var NONPROFIT = {};
var PUBLIC = {};
var relevantData = { FOR_PROFIT, NONPROFIT, PUBLIC };

/*
var sl1_owe = 0,
    sl1_dontOwe = 0;

var sl6_behind = 0,
    sl6_notBehind = 0;

var oweBehind = 0,
    oweOnTime = 0,
    paidOff = 0;
*/

d3.csv("shed.csv", function(data)
{
    data.map(function(d)
    {
        control.push(d.control);
        SL1.push(d.SL1);
        SL6.push(d.SL6);
        ppage.push(d.ppage);
        ppethm.push(d.ppethm);
    });

    for (var i = 0; i < control.length; i++)
    {
        if (ppage[i] >= minAge && ppage[i] <= maxAge)
            continue;

        if (control[i] === "Public")
        {
            c_pub++;
            if (SL1[i] === "Yes" && SL6[i] === "Yes")
                pub_behind++;
            else if (SL1[i] === "Yes" && SL6[i] === "No")
                pub_ontime++;
            else if (SL1[i] === "No")
                pub_paid++;
        }
        else if (control[i] === "Private not-for-profit")
        {
            c_priv++;
            if (SL1[i] === "Yes" && SL6[i] === "Yes")
                priv_behind++;
            else if (SL1[i] === "Yes" && SL6[i] === "No")
                priv_ontime++;
            else if (SL1[i] === "No")
                priv_paid++;
        }
        else if (control[i] === "Private for-profit")
        {
            c_privp++;
            if (SL1[i] === "Yes" && SL6[i] === "Yes")
                privp_behind++;
            else if (SL1[i] === "Yes" && SL6[i] === "No")
                privp_ontime++;
            else if (SL1[i] === "No")
                privp_paid++;
        }


        /*
        if (SL1[i] === "Yes" && SL6[i] === "Yes")
            oweBehind++;
        else if (SL1[i] === "Yes" && SL6[i] === "No")
            oweOnTime++;
        else if (SL1[i] === "No")
            paidOff++; */


        /*
        if (SL1[i] === "Yes")
            sl1_owe++;
        else if (SL1[i] === "No")
            sl1_dontOwe++;

        if (SL6[i] === "Yes")
            sl6_behind++;
        else if (SL6[i] === "No")
            sl6_notBehind++; */
    }

    console.log(data);

    // Creates the test graph of data
    FOR_PROFIT["Institution"] = "For-profit";
    FOR_PROFIT["Currently owe debt; behind"] = ((privp_behind / c_privp) * 100);
    FOR_PROFIT["Currently owe debt; not behind"] = ((privp_ontime / c_privp) * 100);
    FOR_PROFIT["Paid off"] = ((privp_paid / c_privp) * 100);

    NONPROFIT["Institution"] = "Nonprofit";
    NONPROFIT["Currently owe debt; behind"] = ((priv_behind / c_priv) * 100);
    NONPROFIT["Currently owe debt; not behind"] = ((priv_ontime / c_priv) * 100);
    NONPROFIT["Paid off"] = ((priv_paid / c_priv) * 100);

    PUBLIC["Institution"] = "Public";
    PUBLIC["Currently owe debt; behind"] = ((pub_behind / c_pub) * 100);
    PUBLIC["Currently owe debt; not behind"] = ((pub_ontime / c_pub) * 100);
    PUBLIC["Paid off"] = ((pub_paid / c_pub) * 100);

    console.log(FOR_PROFIT);
    console.log(NONPROFIT);
    console.log(PUBLIC);

    $('#information').append("<table><tr><td>INST</td><td>OWE/BEHIND</td><td>OWE/ON TIME</td><td>PAID OFF</td></tr>" +
        "<tr><td>PUBLIC</td><td>"+((pub_behind / c_pub) * 100)+"</td><td>"+((pub_ontime / c_pub) * 100)+"</td><td>"+((pub_paid / c_pub) * 100)+"</td></tr>" +
        "<tr><td>PRIVATE</td><td>"+((priv_behind / c_priv) * 100)+"</td><td>"+((priv_ontime / c_priv) * 100)+"</td><td>"+((priv_paid / c_priv) * 100)+"</td></tr>" +
        "<tr><td>PRIVATE, PROFIT</td><td>"+((privp_behind / c_privp) * 100)+"</td><td>"+((privp_ontime / c_privp) * 100)+"</td><td>"+((privp_paid / c_privp) * 100)+"</td></tr>" +
        "</table>");

});

主要问题：

如何使用我的对象数组为数据注入d3图表？我正在尝试制作堆积条形图，但我不确定如何使用该数据来调整内容？通常，对于像CSV或JSON文件这样的数据文件，您可以使用类似d3.csv(myData.csv, function(data)之类的内容。

我真的很茫然，我觉得我需要这些信息来帮助它最终点击。

编辑： relevantData是我正在尝试用于数据源的内容。它按如下方式输出到控制台：

Object { FOR_PROFIT: Object, NONPROFIT: Object, PUBLIC: Object }