0

我正在使用 d3noob 的“添加表格”教程来获取大部分表格，但我无法弄清楚如何按照我想要的方式布置单元格。

我很确定我搞砸了第一个 thead.append 块，但如果我删除“.data(columns)”，我只会得到一个白页。

谢谢您的帮助！

var parseDate = d3.time.format("%d-%b-%y").parse;

// Get the data
d3.tsv("data/data2.tsv",function(error,data) {

data.forEach(function(d) {
    d.date1 = parseDate(d.date);
    d.close = +d.close;
    d.open = +d.open;
    d.diff = Math.round(( d.close - d.open ) * 100 ) / 100;
});

// Time to make the tables
function tabulate(data, columns) {
    var table = d3.select("body").append("table").attr("class", "graph-key"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

        // What the hell?
        thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
        .attr("colspan", "2")
        .text("Stuff Here");

        // 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")
        .html(function(d) {
            return d.value;
        });
        return table;
}

// Render the table
var peopleTable = tabulate(data, ["date", "close", "open", "diff"]);
});
4

1 回答 1

2

这是一个修改后的表格，可以满足您的需求，并根据您的评论进行示例调用。

该表格采用标题参数，该参数是具有名称和可选跨度的对象数组的数组。

// Time to make the tables
function tabulate(data, header) {
    var table = d3.select("body").append("table").attr("class", "graph-key"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    thead.selectAll("tr")
        .data(header)
        .enter()
        .append("tr")
        .selectAll("th")
            .data(function(d) {return d;})
            .enter()
            .append("th")
            .attr("colspan", function(d) {return d.span;})
            .text(function(d) {return d.name;});

    // 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")
        .html(function(d) {
            return d.value;
        });
    return table;
}

// Render the table
var peopleTable = tabulate(data, [
    [{name: "Foo", span: 2}, {name: "Bar", span: 3}], 
    [{name: "1"}, {name: "2"}, {name: "3"}, {name: "4"}, {name: "5"}]
]);
于 2013-08-06T05:18:10.797 回答