手动将元素添加到 d3 中的选择中

我正在尝试以编程方式在 d3 中创建一个表，其顶部有四分之一，左侧有值。给定一个四分之一向量["q1", "q2", "q3", "q4"]，我想要表格：

   | q1 | q2 | q3 | q4 |
v1 |    |    |    |    |
v2 |    |    |    |    |

运行下面的代码时我得到的是：

   | q2 | q3 | q4 |
v1 |    |    |    |
v2 |    |    |    |

请注意，第一列缺失。我正在使用以下代码：

var qtrs = ["q1", "q2", "q3", "q4"];

var info = d3.select("body"),
    thead = info.append("thead"),
    tbody = info.append("tbody");

thead.append("tr").append("th").text("")
thead.select("tr")
    .selectAll("th")
    .data(qtrs)
    .enter()
    .insert("th")
    .text(function (d) { return (d);  });

tbody.append("tr").insert("td").text("Value 1")
            tbody.append("tr").insert("td").text("Value 2")
            tbody.selectAll("tr").selectAll("td").data(qtrs).enter()
            .append("td").text("0.0");

也可以在这里找到：http://jsfiddle.net/TpCJk/ http://jsfiddle.net/TpCJk/

我正在努力解决的部分是如何在使用时手动选择/添加单个元素（即第一列）到表中data(qtrs)自动生成其余的列。

似乎发生的情况是 selectAll 还选择（手动创建的）空单元格并覆盖它。我尝试稍后添加第一列（将thead.select("tr").insert("th").text("...");创建后th然而，它似乎总是落在桌子的末尾，而不是开始。

请注意，qtrs这里的数组是一个例子，在我的完整应用程序中，它将取决于传递给它的数据（即可以更长或更短）。 “值 1”和“值 2”行是固定的。

非常感谢任何帮助！

问题是您已经有一个未通过数据指定的表（标题）单元格。 D3 将数据元素与 DOM 元素匹配的方式（在data()函数）默认按索引。也就是说，您传入的第一个数据元素与第一个表（标题）单元格匹配，在您的特定情况下，该单元格已经存在。因此，它不在.enter()选择。

解决此问题的最佳方法是简单地提供一个函数来告诉 D3 如何将数据与 DOM 元素匹配。代码

thead.select("tr")
     .selectAll("th")
     .data(qtrs, function(d) { return d; })
     .enter()
     .insert("th")
     .text(function (d) { return (d);  });

正确插入所有表头。如果您在添加表格单元格时指定相同的匹配函数，它们也将被正确添加（即正确的列数）。