0

我正在尝试以编程方式在 d3 中创建一个表格，顶部为四分之一，左侧为值。给定一个 Quarters 的向量["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”行是固定的。

非常感谢任何帮助！

4

1 回答 1

0

问题是您已经有一个未通过数据指定的表格（标题）单元格。默认情况下，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);  });

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

于 2013-05-01T19:34:00.930 回答