在 d3 中的 html 表中添加单行多列

Question

我正在使用以下代码将表格添加到我的 d3 图表中。

 function tabulate(data, columns) {
      const table = d3.select('body').append('table')
      const thead = table.append('thead')
      const tbody = table.append('tbody');

      // append the header row
      thead.append('td')
        .selectAll('th')
        .data(columns).enter()
        .append('th')
        .text((column) => column);

      // // create a row for each object in the data
      const rows = tbody.selectAll('tr')
        .data(data)
        .enter()
        .append('tr');

      // create a cell in each row for each column
      const cells = rows.selectAll('td')
        .data((row) => {
          return columns.map((column) => {
            return { column: [column], value: row[column] };
          });
        })
        .enter()
        .append('td')
        .text((d) => d.value);

        return table;
    }

我需要在表格中添加一个垂直标题，并将 json 对象中的每个键读取到单行中的多个列中。如何在 d3 中实现这一点？请帮忙。

Answer 1

这是一个很好的例子，使用与您相同的函数tabulate：Basic D3 Table