D3.js 如何使用嵌套数组绘制网格？

我是d3的新手。我有这个，它可以工作：

<script type="text/javascript">

  var w = 620;
  var h = 30;

  var father = [ true, true, false, false, false ];

  //Create SVG element
  var svg = d3.select("#parentsmed")
        .append("svg")
        .attr("height", h)
        .attr("width", w);

  var fatherrects = svg.selectAll("rect")
      .data(father)
      .enter()
      .append("rect");

  fatherrects.attr("x", function(d, i) {
        return (i * 31) + 93;
      })
       .attr("width", 30)
       .attr("height",30)
       .attr("fill", function(d, i) {
        if(father[i] == true) {
          return "#89CFF0";
        } else {
          return "#efefef";
        }
       });

</script>

var w=620；
var h=30；
var father=[真，真，假，假，假]；
//创建SVG元素
var svg=d3.选择（“parentsmed”）
.append（“svg”）
.attr（“高度”，h）
.attr（“宽度”，w）；
var fatherrects=svg.selectAll（“rect”）
.数据（父亲）
.输入（）
.append（“rect”）；
fatherrects.attr（“x”，函数（d，i）{
返回（i*31）+93；
})
.attr（“宽度”，30）
.attr（“高度”，30）
.attr（“填充”，函数（d，i）{
if（父[i]==真）{
返回“#89CFF0”；
}否则{
返回“#efefef”；
}
});

我想做的是使用另一个数组变量或嵌套数组，并绘制“母亲”值。。。大概是这样的：

<script type="text/javascript">

  var w = 620;
  var h = 30;

  var father = [ true, true, false, false, false ];
  var mother = [ false, true, false, false, true ];

  //Create SVG element
  var svg = d3.select("#parentsmed")
        .append("svg")
        .attr("height", h)
        .attr("width", w);

  var fatherrects = svg.selectAll("rect")
      .data(father)
      .enter()
      .append("rect");

  fatherrects.attr("x", function(d, i) {
        return (i * 31) + 93;
      })
       .attr("width", 30)
       .attr("height",30)
       .attr("fill", function(d, i) {
        if(father[i] == true) {
          return "#89CFF0";
        } else {
          return "#efefef";
        }
       });


  var motherrects = svg.selectAll("rect")
      .data(mother)
      .enter()
      .append("rect");

  motherrects.attr("x", function(d, i) {
        return (i * 31) + 93;
      })
       .attr("y", 31)
       .attr("width", 30)
       .attr("height",30)
       .attr("fill", function(d, i) {
        if(mother[i] == true) {
          return "#89CFF0";
        } else {
          return "#efefef";
        }
       });
</script>

var w=620；
var h=30；
var father=[真，真，假，假，假]；
var mother=[假，真，假，假，真]；
//创建SVG元素
var svg=d3.选择（“parentsmed”）
.append（“svg”）
.attr（“高度”，h）
.attr（“宽度”，w）；
var fatherrects=svg.selectAll（“rect”）
.数据（父亲）
.输入（）
.append（“rect”）；
fatherrects.attr（“x”，函数（d，i）{
返回（i*31）+93；
})
.attr（“宽度”，30）
.attr（“高度”，30）
.attr（“填充”，函数（d，i）{
if（父[i]==真）{
返回“#89CFF0”；
}否则{
返回“#efefef”；
}
});
var motherrects=svg.selectAll（“rect”）
.数据（母亲）
.输入（）
.append（“rect”）；
motherrects.attr（“x”，函数（d，i）{
返回（i*31）+93；
})
.attr（“y”，31）
.attr（“宽度”，30）
.attr（“高度”，30）
.attr（“填充”，函数（d，i）{
if（母亲[i]==true）{
返回“#89CFF0”；
}否则{
返回“#efefef”；
}
});

---

这将绘制父矩形，但不绘制母矩形。如何让它使用两个数组变量（如图所示）或一个

var data=[father，mother]来绘制这两个数组（父数组在顶行，母数组在底行）嵌套数组？
您在父案例和母案例中选择了相同的
元素。由于在数据绑定中没有提供键函数，因此键默认为数组索引，这对于父数组和母数组都是相同的。相同的节点加上相同的绑定键意味着您正在使用母数据更新父节点（并且
enter（）
选择将为空）

如果将“父”类添加到父节点，将“母”类添加到母节点，则可以在选择中将它们分开。例如：

 var motherrects = svg.selectAll("rect.mother")
    .data(mother)
    .enter()
    .append("rect")
        .attr("class", "mother");

另一个选项是将一个键函数传递到
data
调用中，但这将涉及修改数据，使其包含可以用作键的内容。通过对节点进行分类来保持节点的独特性更容易，而且可能更正确

另一种选择是使用您建议的2D数组（
[父，母]
），然后将每个子数组中的矩形分组到它们自己的
：

这利用了选择的分组结构。
data
函数中
d
的值将在第一次调用中为父数组，然后在第二次调用中为母数组，并且将在相应的
元素下创建RECT。
在父和母案例中选择相同的
元素。由于在数据绑定中没有提供键函数，因此键默认为数组索引，这对于父数组和母数组都是相同的。相同的节点加上相同的绑定键意味着您正在使用母数据更新父节点（并且
enter（）
选择将为空）

如果将“父”类添加到父节点，将“母”类添加到母节点，则可以在选择中将它们分开。例如：

 var motherrects = svg.selectAll("rect.mother")
    .data(mother)
    .enter()
    .append("rect")
        .attr("class", "mother");

另一个选项是将一个键函数传递到
data
调用中，但这将涉及修改数据，使其包含可以用作键的内容。通过对节点进行分类来保持节点的独特性更容易，而且可能更正确

另一种选择是使用您建议的2D数组（
[父，母]
），然后将每个子数组中的矩形分组到它们自己的
：

这利用了选择的分组结构。
data
函数中
d
的值将在第一次调用中为父数组，然后在第二次调用中为母数组，并且将在相应的
元素下创建RECT。
我已编辑了您的标题。请看“”，其中的共识是“不，他们不应该”。我已经编辑了你的标题。请参阅“”，其中的共识是“不，他们不应该”。