具有阵列阵列的D3表示例产生空TD标签

Question

我正在尝试在this example之后创建一个包含d3.js的表。即这是我正在使用的代码

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; });

我传递的数据看起来像标准的AoA，如下所示：

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

但是当上面的javascript执行时，表包含正确的行数和列数，但数据本身是空的

<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>

我在这里做错了什么？

事实上，当我提醒d变量的内容时，我看到了这个

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

显然这里有问题：

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

Answer 1

要解决列值的问题，您必须更改以下代码行

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

这一个

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

享受！