D3表示例与数组的数组产生空的TD标签 [英] 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; });

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

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

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

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

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?

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

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

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

显然这里有问题:

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

推荐答案

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

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

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

这个人

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

享受！

这篇关于D3表示例与数组的数组产生空的TD标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！