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

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

1 个答案: