D3 Table Example with Array of Arrays Yields Empty TD Tags

问题

I am trying to create a table with d3.js following this example. Namely this is the code I am using

var table = d3.select("#myTableDiv").append("table")
                .attr("style", "margin-left: 0px"),
            thead = table.append("thead"),
            tbody = table.append("tbody");

        // append the header row
        thead.append("tr")
            .selectAll("th")
            .data(columns)
            .enter()
            .append("th")
            .text(function(column) { return column; });

        // create a row for each object in the data
        var rows = tbody.selectAll("tr")
            .data(data)
            .enter()
            .append("tr");

        // create a cell in each row for each column
        var cells = rows.selectAll("td")
            .data(function(row) {
                return columns.map(function(column) {
                    return {column: column, value: row[column]};
                });
            })
            .enter()
            .append("td")
            .attr("style", "font-family: Courier")
            .html(function(d) { return d.value; });

I am passing in data that looks like a standard AoA, something like this:

[
    [
       '2013-10',
        18000,
        43,
    ],
    [
       '2013-10',        
       224500,
       22,
    ],
}

But when the javascript above executes, the table contains the correct number of rows and columns, but the data itself is empty

<tbody>
    <tr>
        <td style="font-family: Courier"></td>
        <td style="font-family: Courier"></td>
        <td style="font-family: Courier"></td>  
    </tr>
    <tr>
        <td style="font-family: Courier"></td>
        <td style="font-family: Courier"></td>
        <td style="font-family: Courier"></td>
    </tr>
</tbody>

What am I doing wrong here?

In fact when I alert the contents of the d variable, I see this

{
    'column' => 'month',
    'value' => [undefined]
}

Clearly there is something wrong here:

return {column: column, value: row[column]};

回答1:

To resolve the problem of the value of columns, you have to change the following line of code

return {column: column, value: row[column]};

by this one

return {column: column, value: row[columns.indexOf(column)]};

Enjoy !

来源：https://stackoverflow.com/questions/23399462/d3-table-example-with-array-of-arrays-yields-empty-td-tags