Question

我期待有一个带有额外行标题的d3.js表。

目前布局如下：

|#  |  TYP              |
|#  | A1 |    | A1 |    |
|#  | B1 | B2 | B1 | B2 |
|------------------------
|C1 | C2 | C3 | C4 | C5 |
|C1 | C2 | C3 | C4 | C5 |
|C1 | C2 | C3 | C4 | C5 |
|C1 | C2 | C3 | C4 | C5 |

但是每列都有以下布局：

[
    {name: 'BLABLA', v1: C1, v2: C2, v3: C3, v4: v4, v5},
    {name: 'BLABLA', v1: C1, v2: C2, v3: C3, v4: v4, v5},
    {name: 'OTHER', v1: C1, v2: C2, v3: C3, v4: v4, v5},
    {name: 'OTHER', v1: C1, v2: C2, v3: C3, v4: v4, v5},
    {name: 'HASE', v1: C1, v2: C2, v3: C3, v4: v4, v5},
    {name: 'XYZ', v1: C1, v2: C2, v3: C3, v4: v4, v5},
    {name: 'ABC', v1: C1, v2: C2, v3: C3, v4: v4, v5}
]

有没有办法在两者之间实际添加名称标题：

|#  |  TYP              |
|#  | A1 |    | A1 |    |
|#  | B1 | B2 | B1 | B2 |
|------------------------
| BLABLA                |
|C1 | C2 | C3 | C4 | C5 |
|C1 | C2 | C3 | C4 | C5 |
| BLABLA                |
|C1 | C2 | C3 | C4 | C5 |
|C1 | C2 | C3 | C4 | C5 |
| HASE                  |
|C1 | C2 | C3 | C4 | C5 |
...

有没有办法实现这个目标？

我的方法是更改数据，以便（有序）数组将有一个只包含名称的自定义行，其他值将为空，但我认为d3js可能足够好，无需更改代表数据？

代码目前是这样的：

// Set up the column names
// One set for the year supercolumns
let yrCols = d3.nest().key((d) => d.year).entries(stats);

// And one for the quarter columns
let qtrCols = d3.keys(d3.nest().key((d) => d.typ_of_year).object(stats));

// Add an empty column for the statistic name
yrCols.unshift("");
qtrCols.unshift("");


// Nest data within each statistic
let aggstats = d3.nest().key((d) => d.month).entries(stats);

// Create the table
let table = d3.select(element).append('table').attr('class', 'whitetable table dataTable');
let thead = table.append('thead');
let tbody = table.append('tbody');

// Append the year headers
thead.append("tr")
    .selectAll("th")
    .data(yrCols)
    .enter()
    .append("th")
    .text((d) => d.key)
    .attr("colspan", (d) => d !== "" ? 2 : 1);

// Append the quarter headers
thead.append("tr")
    .selectAll("th")
    .data(qtrCols)
    .enter()
    .append("th")
    .text((column) => column.substring(4, 7));


// Bind each statistic to a line of the table
let rows = tbody.selectAll("tr")
    .data(aggstats)
    .enter()
    .append("tr")
    .attr('rowstat', (d) => d.key);


// Add statistic names to each row
rows.append("td").text((d) => d.key).attr("class", 'rowkey');

// Fill in the cells.  The data -> d.values pulls the value arrays from
// the data assigned above to each row.
// The unshift crap bumps the data cells over one - otherwise, the first
// result value falls under the statistic labels.
rows.selectAll("td")
    .data(function (d) {
        let x = d.values;
        x.unshift({total: ""});
        return x;
    })
    .enter()
    .append("td")
    .attr('class', (d) => colors[d.typ])
    .text((d) => d.total);

P.S。：我（还）相对于d3.js而言，我仍在寻找/通过学习资源。

Answer 1

我通过预先格式化我的数据解决了这个问题：

[
    {name: BLABLA, v1: null, v2: null, v3: null, v4: null},
    {name: SUB_BLABLA, v1: C1, v2: C2, v3: C3, v4: v4}
]

然后使用：

    tbody.selectAll('tr')
        .data(stats)
        .enter()
        .append('tr')
        .attr('rowstat', d => d.name)
        .selectAll('td')
        .append('td')
        .data(row => {
            let n = {value: row.name, css: row.header ? 'td_bold' : ''};
            let qc = {value: row.quantity_cn, css: row.header ? '' : 'td_blue'};
            let tc = {value: row.total_cn, css: row.header ? '' : 'td_blue'};
            let qd = {value: row.quantity_de, css: row.header ? '' : 'td_green'};
            let td = {value: row.total_de, css: row.header ? '' : 'td_green'};
            return [n, qc, tc, qd, td];
        })
        .enter()
        .append('td')
        .text(d => d.value)
        .attr('class', d => d.css);

像魅力一样工作。

带行标题的表？

1 个答案: