Javascript 如何按行对元素进行分组？

嗨，我刚开始学习d3.js，我有一个问题，我如何将每一行分组在一起

假设我有一个简单的数组，我想创建两个组，第一个组包含0,1位置的元素，第二个组包含2,3位置的元素

var svgViewport = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000);

let myData = [{
    x: 30,
    y: 40
  },
  {
    x: 50,
    y: 70
  },
  {
    x: 70,
    y: 80
  },
  {
    x: 90,
    y: 90
  }
];

var circleSelect = svgViewport.selectAll("circle").data(myData);

var circles = circleSelect.enter().append("circle");

circles
  .attr("cx", (d) => {
    return d.x
  })
  .attr("cy", (d) => {
    return d.y
  })
  .attr("r", 10);

我也尝试给每个人一个类，但在这种情况下，我有一个问题，选择类名

for (let i = 0; i < 2; i++) {
  for (let j = 0; j < 2; j++) {
    svgViewport.append("g")
      .append("circle")
      .attr("class", i);
  }
}

for（设i=0；i<2；i++）{
for（设j=0；j<2；j++）{
svgViewport.append（“g”）
.附加（“圆圈”）
.attr（“类别”，i）；
}
}

首先，不要使用

for

循环在D3代码中附加元素。我们确实对循环使用

（和类似的方法），但是在非常特定的情况下。解释如何重构您的第二个代码片段需要一个新的答案（在S.O.这里，我们每个帖子只保留一期）

如果我正确理解了您的问题，您所说的组是指
元素。在这种情况下，您应该根据所需的组分离数据（在内部数组中）。例如：

let myData=[[{x:30,y:40},{x:50,y:70}],
    [{x:70,y:80},{x:90,y:90}]
];

下面是一个演示，仅使用enter选项：


const svgViewport=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，150）
.attr（“高度”，150）；
让myData=[
[{
x:30，
y:40
},
{
x:50，
y:70
}
],
[{
x:70，
y:80
},
{
x:90，
y:90
}
]
];
const groups=svgViewport.selectAll（空）
.数据（myData）
.输入（）
.附加（“g”）；
常量圆=组。选择全部（空）
.数据（d=>d）
.输入（）
.附加（“圆圈”）
.attr（“cx”，（d）=>d.x）
.attr（“cy”，（d）=>d.y）
.attr（“r”，10）
首先，不要使用
for
循环在D3代码中附加元素。我们确实对循环使用
（和类似的方法），但是在非常特定的情况下。解释如何重构您的第二个代码片段需要一个新的答案（在S.O.这里，我们每个帖子只保留一期）

如果我正确理解了您的问题，您所说的组是指
元素。在这种情况下，您应该根据所需的组分离数据（在内部数组中）。例如：

let myData=[[{x:30,y:40},{x:50,y:70}],
    [{x:70,y:80},{x:90,y:90}]
];

下面是一个演示，仅使用enter选项：


const svgViewport=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，150）
.attr（“高度”，150）；
让myData=[
[{
x:30，
y:40
},
{
x:50，
y:70
}
],
[{
x:70，
y:80
},
{
x:90，
y:90
}
]
];
const groups=svgViewport.selectAll（空）
.数据（myData）
.输入（）
.附加（“g”）；
常量圆=组。选择全部（空）
.数据（d=>d）
.输入（）
.附加（“圆圈”）
.attr（“cx”，（d）=>d.x）
.attr（“cy”，（d）=>d.y）
.attr（“r”，10）