Javascript 如何在D3中附加多个矩形？

我想知道是否有可能在每个数据点上附加多个矩形。 在我的示例中，有三个数据点。 对于每一个，我尝试创建两个矩形。 最后必须有6个矩形。3件红色，3件蓝色。

根据答案，我尝试了以下解决方案：

var svg = d3.select("body").append("svg");

      svg.selectAll("rect")
      .data([10,60,120])
      .enter()
      .append("g")
      .append("rect")
      .attr("width", 20)
      .attr("height", 20)
      .attr("x", 20)
      .attr("y", function(d) {return d})
      .attr("fill",  "red")

      .selectAll("rect")
      .data(function(d) { return d3.range(d); })
      .enter()
      .append("rect")
      .attr("width", 20)
      .attr("height", 20)
      .attr("x", 60)
      .attr("y", function(d) {return d})
      .attr("fill",  "blue");

不幸的是，蓝色矩形是在红色矩形中创建的。你知道如何做到这一点吗？

---

下面是一个

您正在成功创建额外的矩形，但不幸的是，它们都嵌套在前三个矩形中。如果浏览器上有web developer扩展，请选择其中一个矩形，然后查看要查看的源代码

如果要附加矩形，而不是将它们嵌套在原始矩形中，则需要将这两个矩形附加到

g

节点。绑定数据并添加

g

节点时，将这些节点分配给变量：

var svg = d3.select("body").append("svg");

var nodes = svg.selectAll(".rect")
  .data([10,60,120])
  .enter()
  .append("g")
  .classed('rect', true)

然后可以将两个矩形附加到

g

节点：

// red rectangles
nodes.append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 20)
  .attr("y", function(d) {return d})
  .attr("fill",  "red")

// blue ones
nodes.append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 120)
  .attr("y", function(d) {return d})
  .attr("fill",  "blue")

请注意，如果执行此操作：

var nodes = svg.selectAll("rect")
  .data([10,60,120])
  .enter()
  .append("g")
  .append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 20)
  .attr("y", function(d) {return d})
  .attr("fill",  "red")

节点

将是对

rect

元素的引用，因为它们是最后添加的内容，任何附加到

节点

的内容都将添加到rect元素内部

还要注意，您只需要将数据绑定到

g

元素一次；它由那些

g

元素的所有子节点自动继承

以下是完整的示例：

var svg=d3.select（“body”）.append（“svg”）；
var g=svg.selectAll（“.rect”）
.数据（[10,60120]）
.输入（）
.附加（“g”）
.classed（'rect'，true）
g、 附加（“rect”）
.attr（“宽度”，20）
.attr（“高度”，20）
.attr（“x”，20）
.attr（“y”，函数（d）{返回d}）
.attr（“填充”、“红色”）
g、 附加（“rect”）
.attr（“宽度”，20）
.attr（“高度”，20）
.attr（“x”，120）
.attr（“y”，函数（d）{返回d}）
.attr（“填充”、“蓝色”）

---

非常感谢您给出这个令人难以置信的答案。这是理解d3.js的一大步。