Question

我有一个数组：circleArray = [1, 4, 2]。现在我想生成圈子。索引是指我希望它们显示的行。每个元素的值是指特定行中的圈数。

那应该是这样的：

这就是我尝试过的：

// Circle Attributes
var nodeRadius = 20;
var xStart = 200, yStart = 50;
var xMargin = 50, yMargin = 50;

var circleArray = [1, 4, 2];

// SVG Viewport
var svgContainer = d3.select("body")
                      .append("svg")
                      .attr("width", 300)
                      .attr("height", 600);

// Append Circles                      
var circle = svgContainer.selectAll("circle")
              .data("circleArray")
              .enter()
              .append("circle")
                .attr("cx", function(d) { return d * xMargin + xStart; })
                .attr("cy", function(d,i) { return i * yMargin + yStart; })
                .attr("r", 20);

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

这件事还没有多大意义，但是我最大的担心是如何以元素的值表示圆的数目和行的索引的方式处理数组的数据< / strong>。通常，我要做的就是添加等于数组长度的圆并完全忽略元素的值。

Answer 1

最简单的方法是使用数据数组追加组...

var group = svgContainer.selectAll(null)
  .data(circleArray)
  .enter()
  .append("g")
  //etc...

...，然后对于每个组，使用基准值创建具有每个行所需的圆数的另一个数组：

var circles = group.selectAll(null)
  .data(function(d) {
    return d3.range(d)
  })
  .enter()
  .append("circle")
  //etc...

在这种情况下，我们获得每个组的数据...

.data(function(d) {
    return d3.range(d)
})

...并将其传递给d3.range()，后者将创建以下数组：

[0]
[0, 1, 2, 3]
[0, 1]

这些值由圆的选择使用。当然，值本身并不重要，仅取决于每个数组的长度。

这里是演示（充满魔幻数字，请相应地更改它们）：

// Circle Attributes
var nodeRadius = 20;

var circleArray = [1, 4, 2];

// SVG Viewport
var svgContainer = d3.select("body")
  .append("svg")
  .attr("width", 300)
  .attr("height", 300);

var group = svgContainer.selectAll(null)
  .data(circleArray)
  .enter()
  .append("g")
  .attr("transform", function(d, i) {
    return "translate(" + (300 / 2 - ((d / 2) * 50)) + "," + (50 + 50 * i) + ")";
  });

var circles = group.selectAll(null)
  .data(function(d) {
    return d3.range(d)
  })
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d * 50;
  })
  .attr("r", nodeRadius)
  .style("fill", "red");

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

PS：与您的问题无关，但是.data("circleArray")是错误的。应该是.data(circleArray)。

追加等于数组中每个元素之和的对象

1 个答案: