Question

我是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;
}

Answer 1

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

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中内联还是向其中添加类）来设置样式。

---- ---- UPDATE

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

JS：

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; });

CSS：

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

垂直标题为d3的数据表

1 个答案: