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

Question

我想知道是否可以为每个数据点附加多个矩形。在我的例子中有三个数据点。对于每个我尝试创建 2 个矩形。最后必须有 6 个矩形。 3个红色，3个蓝色。 IMAGE

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

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

不幸的是，蓝色矩形是在红色矩形内创建的。知道如何实现这一目标吗？这是一个 EXAMPLE

Answer 1

您已成功创建额外的矩形，但遗憾的是它们都嵌套在前三个矩形内。如果您的浏览器上有 Web 开发人员扩展，select 矩形之一，然后查看源代码。

如果您想附加矩形，而不是将它们嵌套在原始矩形内，则需要将两个矩形附加到您的 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")

nodes 将是对 rect 元素的引用，因为它们是最后添加的内容，任何附加到 nodes 的内容都将添加到内部 rect 个元素。

另请注意，您只需将数据绑定到 g 元素一次；它被那些 g 元素的所有子节点自动继承。

这是完整的示例：

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

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

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

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

<script src="https://d3js.org/d3.v5.js"></script>

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

How to append multiple rectangles in D3?

javascript

append

rectangles

d3.js