如何在 D3 中附加多个矩形? [英] How to append multiple rectangles in D3?

问题描述

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

I´m wondering if it is possible to append multiple rectangles per datapoint. In my example there are three datapoints. For each I try to create 2 rectangles. In the end there have to be 6 rectangles. 3 in red, 3 in blue. IMAGE

根据这个 回答，我尝试了以下解决方案:

According to this answer, I tried the following solution:

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

不幸的是，蓝色矩形是在红色矩形内创建的.知道如何实现这一目标吗?这是一个示例

Unfortunately the blue rectangles are created inside the red ones. Any idea how to achieve this? Here is an EXAMPLE

推荐答案

您已成功创建了额外的矩形，但不幸的是，它们都嵌套在前三个矩形内.如果您的浏览器上有 Web 开发者扩展程序，请选择其中一个矩形，然后查看源代码.

You're successfully creating extra rectangles, but unfortunately they are all nested inside the first three rectangles. If you have a web developer extension on your browser, select one of the rectangles and then view the source to see.

如果要附加矩形，而不是将它们嵌套在原始矩形内，则需要将两个矩形都附加到 g 节点.当您绑定数据并添加 g 节点时，将这些节点分配给一个变量:

If you want to append the rectangles, rather than nest them inside the original rectangle, you need to append both rectangles to your g node. When you bind the data and add your g nodes, assign those nodes to a variable:

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

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

然后您可以将两个矩形附加到 g 节点:

Then you can append the two rectangles to the g nodes:

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

请注意，如果您这样做:

Note that if you do this:

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 元素.

nodes will be a reference to the rect elements, as they were the last thing added, and anything appended to nodes will be added inside the rect elements.

还要注意，你只需要将数据绑定到 g 元素；它被那些 g 元素的所有子节点自动继承.

Note also that you only need to bind the data once, to the g elements; it is automatically inherited by all the child nodes of those g elements.

这是完整的示例:

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 中附加多个矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！