D3.js 使用d3js在AD中构建多行表，其中一些单元格具有混合的colspan宽度

我正在使用d3noob的“添加表格”教程来获取大部分表格，但我不知道如何按照我想要的方式布置thead单元格

我很确定我在第一个thead.append块上搞砸了，但是如果我删除“.data（columns）”，我只会得到一个白色页面

谢谢你的帮助

---

---

下面是一个修改后的表格，它可以满足您的需要，并根据您的评论提供了一个示例调用

此表格采用标题参数，该参数是具有名称和可选范围的对象数组数组

// 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"}]
]);

---

你想要什么作为晚餐？您当前正在添加其中的两个。我正在尝试获得如下内容：

Foo Bar 1 2 3 4 5

我不知道如何获得D3来渲染混合的colspan宽度。您需要以某种方式生成数据的这一部分，以便可以打开它。这很有效。谢谢现在我得到了一个不同的错误“UncaughtTypeError:无法调用undefined的方法‘map’”。我认为这与tbody中的列定义不正确有关。如果我搞不懂，我会写一篇新文章。再次感谢你的帮助，雷。

// 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"}]
]);