使用D3创建一个表，其中两行是同级行

Creating a table with D3 where two rows are siblings

本文关键字：两行 创建 D3 使用 一个      更新时间：2023-09-26

我正在创建一个具有D3的表，该表源于CSV文件。我可以使行与CSV中的每一行相匹配，但我有一列的文本数据很长。为了可读性，我希望将该列放在横跨整个表的其他列下面的单元格中：

<table>
 ...
    <tr>
        <td>col1</td><td>col2</td>...<td>colN</td>
    </tr>
    <tr>
        <td colspan="N">lengthy text</td>
    </tr>
 ...
</table>

然而，D3似乎没有添加兄弟元素的好方法。我在其他地方读过（d3.js-如何插入新的同级元素），可以迭代已经创建的第一个同级元素，并添加第二个。。。但是，我有来自源行的数据，需要添加到同级行中。

如果我尝试：

var row = mytable.enter().append("tr").attr("class","firstrow");
var row2 = mytable.enter().append("tr").attr("class","secondrow");

所有第二行都附加在所有第一行之后。

如果我尝试：

var row = mytable.enter().append("tr").attr("class","firstrow");
var row2 = mytable.insert("tr").attr("class","secondrow");

第二行附加在第一行中。

这与上面的结果相同：

var row = mytable.enter().append("tr").attr("class","firstrow");
var row2 = mytable.insert("tr","tr").attr("class","secondrow");

感谢您的帮助！

编辑：对于那些想玩的人来说，以下是整个过程：

function createTable(source, title, columns, hook) {
var tableOutput = d3.select(hook).append("table");
var headingRow = tableOutput.append("tr");
var datasets = [source];
var tableHeadings = headingRow.selectAll(".column_headings")
.data(columns)
.enter().append("th").text(function (d) {return d;}).attr("class","column_headings");
var tableChart = function(source) {
    d3.csv(source, function(d) {
        return {
            thing1: +d.thing1,
            thing2: d.thing2,
            lengthything: d.lengthything, //the text that needs to go in the second row
            link: d.link //wrap a link around lenthything
        };
    },
function(error, data) {
    //do the table
    var mytable = tableOutput.selectAll().data(data);
    var row = mytable.enter().append("tr").attr("class","firstrow");
    var row2 = mytable.insert("tr","tr").attr("class","secondrow");
    row.append("td").attr("class","numeric").text(function(d) { return d.thing1 });
    row.append("td").text(function(d) { return d.thing2 });
});
};
tableChart(datasets[0]);

}

重新构造数据。不要让N大小的数据数组中的每个对象都对应一行，而是修改数据，以便在现有行之间添加N个新行，其中每一新行都是一个对象，包含冗长的文本和一个标识符，您可以使用该标识符将其与其他行区分开。

我想明白了。不过，我不认为有一种严格的D3方法可以做到这一点（仍然只对D3的答案开放）。

function(error, data) {
    //do the table
    var mytable = tableOutput.selectAll().data(data);
    var row = mytable.enter().append("tr").attr("class","firstrow");
    //var row2 = mytable.insert("tr","tr").attr("class","secondrow");
    //the above is replaced with:
    d3.selectAll("tr.firstrow").each(function(d) {
        p = this.parentNode; //grab the parent table element
        r = document.createElement("tr");
        r.setAttribute("class","secondrow");
        c = document.createElement("td");
        c.setAttribute("colspan","8");
        a = document.createElement("a");
        a.setAttribute("href",d.link);
        a.innerText = d.message;
        //glue everything together
        c.appendChild(a);
        r.appendChild(c);
        //insert the second row after the first
        p.insertBefore(r,this.nextSibling);
    });
    row.append("td").attr("class","numeric").text(function(d) { return d.thing1 });
    row.append("td").text(function(d) { return d.thing2 });
});

它很难看，但很管用。有人有更干净/更有效的方法吗？

相关文章：