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

Question

我试图以编程方式在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/

我与挣扎的部分是如何手动选择/添加单个元素（即第一列）表同时使用data(qtrs)自动生成其余列。

似乎正在发生的事情是，selectAll还选择（手动创建的）空单元并覆盖它。我试着将第一列后（把thead.select("tr").insert("th").text("...");创建th后但它似乎总是在餐桌上，而不是开始的结束土地。

请注意，这里的qtrs阵列就是一个例子，在我的全面应用这将取决于传递给它的数据（即可以更长或更短）。“值1”和“值2”线是固定的。

任何帮助，非常感谢！

Answer 1

的问题是，你已经有一个没有通过数据指定的表格（标题）单元格。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); }); 

正确插入所有表格标题。如果在添加表格单元格时指定了相同的匹配功能，则它们将被正确添加（即正确的列数）。