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

使用以下数据：

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

我需要将html结构变为：

 
  Sun  Mon .... Etc  

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

 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：

 
   .... Etc Sun Mon .... Etc  

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

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