Javascript 垂直航向为d3的数据表

我不熟悉d3和html。从下面的代码中，我了解了如何在d3中创建具有水平标题的表。请告诉我如何创建具有垂直标题的D3表格

function tabulate(data, columns) {
    var table = d3.select("body").append("table")
            .attr("style", "margin-left: 250px"),
        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; });

    return table;
}

---

表元素没有垂直标题元素。但是，您可以通过在数据中添加新列来创建一些：

new column:    original columns:
vertical-head | col-1 | col-2 | col-3
row-1         | 1     | 1     | 1
row-2         | 2     | 2     | 2
row-3         | 3     | 3     | 3

然后通过向这些单元格中添加css（无论是在D3中内联还是通过向单元格中添加类）来设置样式

----更新----

要更改左列的样式，可以添加css内联，也可以向左单元格添加类并更改样式表中的css（推荐）：

JS:

CSS:

---

谢谢Tony.请您给出一个示例，说明如何在d3中设计新柱单元的样式

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")
    .attr('class', 'horizontal-header')
    .html(function(d) { return d.value; });

.horizontal-header {
    // add css styles here
}