如何修复网格中圆形上下移动时堆叠成单行的异常问题？

Hey there! Let's get those circles arranged in a proper grid and moving up/down like you want.

问题根源 #

从你的描述和代码片段来看，你已经正确处理了圆形的x坐标（列分布），但完全没处理好**y坐标（行分布）**的计算——所有圆形的y值都被设成了同一个值，所以它们全部堆叠在顶部，变成了单行移动。

修复步骤 #

核心就是给每个圆形计算对应的行号，然后基于行号设置正确的初始y坐标，再在动画中基于这个基础坐标做上下偏移：

• 计算行号：用Math.floor(i / numCols)把每个圆形的索引转换成对应的行索引（比如第0-3个圆在第0行，第4-7个在第1行，以此类推，假设numCols是列数）。
• 设置初始y坐标：用行号乘以行间距（比如圆直径+间隙），再加上偏移让圆居中，这样就能形成规整的网格。
• 实现上下移动动画：动画时要基于每个圆的基础y坐标做偏移，而不是直接设置固定值，这样网格结构不会乱。

完整修复代码示例 #

// 假设你定义了gap（圆之间的间隙）等变量
var gap = 10;

var circles = svg6.selectAll("circle")
  .data(getCircles(radius,color))
  .enter()
  .append("circle")
  .attr("class", function (d, i) { 
    return "svg6-circles svg6-circle-" + i; 
  })
  .attr("cx", function (d, i) { 
    var remainder = i % numCols; 
    // 计算x坐标：列索引*(直径+间隙) + 半径 + 间隙，保证圆居中排列
    return remainder * (radius * 2 + gap) + radius + gap; 
  })
  .attr("cy", function (d, i) { 
    var rowIndex = Math.floor(i / numCols); // 关键：计算当前圆所在的行
    // 计算y坐标：行索引*(直径+间隙) + 半径 + 间隙
    return rowIndex * (radius * 2 + gap) + radius + gap; 
  })
  .attr("r", radius)
  .attr("fill", function(d) { return d.color; });

// 实现上下移动的循环动画
circles.transition()
  .duration(1500)
  .repeat(-1) // 无限循环
  .ease(d3.easeInOut) // 缓动效果让移动更自然
  .attr("cy", function(d, i) {
    var rowIndex = Math.floor(i / numCols);
    // 先拿到基础y坐标
    var baseY = rowIndex * (radius * 2 + gap) + radius + gap;
    // 用正弦函数实现平滑的上下移动，20是移动的幅度，可调整
    return baseY + (Math.sin(Date.now() / 600) * 20); 
  });

关键说明 #

• Math.floor(i / numCols)是解决堆叠问题的核心，它确保每个行的圆形有不同的基础y位置，不会挤在一起。
• 动画时基于基础y坐标做偏移，这样整个网格的结构会保持，每个圆都在自己的网格位置上上下移动，而不是全部挤成一团。

内容的提问来源于stack exchange，提问作者Alex