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);  });

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

手动将元素添加到d3中的选定内容

1 个答案: