如何使用 d3.js 选择为每个数据元素创建多个相邻节点

Question

使用如下数据：

var days = ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat"];

我需要把html结构变成：

<div>
  <input id="day0" type="checkbox">
  <label for="day0">Sun</label>

  <input id="day1" type="checkbox">
  <label for="day1">Mon</label>
  .... Etc

</div>

目前我目前失败的解决方案是：

var selection = d3.select("div");
var enter    = selection.selectAll("input").data(days).enter()

enter.append("input")
     .attr("type","checkbox")
     .attr("id",function(d,i){ return "day"+i;})

enter.append("label")
     .attr("for",function(d,i){ return "day"+i;})
     .text(function(d,i){return daysAbbr[i];})

这给了我一个不正确的 dom：

<div>
  <input id="day0" type="checkbox">
  <input id="day1" type="checkbox">
   .... Etc
  <label for="day0">Sun</label>
  <label for="day1">Mon</label>
  .... Etc
</div>

我将如何创建所有这些相邻的兄弟姐妹？

Answer 1

你得到这个结构是因为 D3 对选择进行了批处理。也就是说，您对选择执行的每个操作都会同时对所有元素执行。

在您的情况下，您可能希望使用.each()，它允许您在选择的每个元素上调用一个函数。代码看起来像这样。

var enter    = selection.selectAll("input").data(days).enter();
enter.each(function() {
  selection.append("input");
  selection.append("label");
});

正如@Holger 指出的那样，这不起作用，因为.enter() 选择没有定义.each()。不过下面的方法会起作用。

在您的情况下，更好的解决方案是将您想要一起出现的元素封装在另一个 div 中。这将允许您以更标准的方式使用 D3。代码如下所示。

var enter    = selection.selectAll("input").data(days).enter();
var divs = enter().append("div");
divs.append("input");
divs.append("label");