d3.js - d3js を使用して、一部のセルに colspan 幅が混在する広告に複数の行を持つテーブルを作成する

Question

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