javascript - 将圆排列成行

Question

我正在尝试获取一个长度为 50 的数组，并在使用 d3 将数据绑定(bind)到这些圆圈时控制这些圆圈的附加方式。在我有 50 个圆圈的情况下，我想要 5 行和 10 列的圆圈。我能想到的最好的办法是这里的以下片段:

var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var circData = new Array(50);

var rowMarker = 1;

graphGroup.selectAll('circle')
    .data(circData)
    .enter()
    .append('circle')
    .attr('cx', function(d,i) { return i*30})
    .attr('cy', function(d,i) {
      if (i%10) {
        rowMarker += 1;
      }
      return rowMarker*30;
    })
    .attr('r', 10)
    .style('fill', 'gray');

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

应该发生的是，每次函数前进十个元素时，rowMarker 都会达到一个新的整数增量，如索引 i 所测量的那样。然而，似乎正在发生的事情是圆圈被附加，使得它们的 y 属性值超过了如果 rowMarker 仅在每一行更新时人们期望的值。

问题

有没有办法像我在上面尝试的那样，帮助我将圆圈映射到 5x10“圆矩阵”中的数据？如果是这样，需要什么逻辑？

Answer 1

你的代码的问题是这...

if (i%10)

...对于除第一个 i 值(即零)和 10 的倍数之外的所有内容都将为 true。

但是，除此之外，您的方法似乎不必要地复杂。您可以简单地设置最大列数...

var maxColumn = 10;

... 然后对 x 和 y 值使用模运算符:

.attr('cx', function(d, i) {
    return (i % maxColumn) * 30
})
.attr('cy', function(d, i) {
    return (~~(i / maxColumn) % maxColumn) * 30
})

这里是你的代码有那个变化:

var margins = {
  top: 20,
  bottom: 300,
  left: 30,
  right: 100
};

var height = 600;
var width = 900;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', totalWidth)
  .attr('height', totalHeight);

var graphGroup = svg.append('g')
  .attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var circData = new Array(50);

var maxColumn = 10;

graphGroup.selectAll('circle')
  .data(circData)
  .enter()
  .append('circle')
  .attr('cx', function(d, i) {
    return (i % maxColumn) * 30
  })
  .attr('cy', function(d, i) {
    return (~~(i / maxColumn) % maxColumn) * 30
  })
  .attr('r', 10)
  .style('fill', 'gray');

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