javascript - 如何按行对元素进行分组？

Question

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

假设我有一个简单的数组，并且我想创建 2 个组，第一个组包含 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);

我也尝试给每个人一个类(class)，但在这种情况下，我在按类(class)名称选择时遇到问题

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

Answer 1

首先，不要使用for循环在 D3 代码中追加元素。我们确实使用 for循环(和类似的方法)，但在非常具体的情况下。解释如何重构你的第二个片段需要一个新的答案(在 S.O.，我们每篇文章只保留 1 个问题)。

如果我正确理解你的问题，组你的意思是<g>元素。在这种情况下，您应该根据所需的组来分隔数据(在内部数组中)。例如:

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

这是一个演示，仅使用输入选择:

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

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

const groups = svgViewport.selectAll(null)
  .data(myData)
  .enter()
  .append("g");

const circles = groups.selectAll(null)
  .data(d => d)
  .enter()
  .append("circle")
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y)
  .attr("r", 10);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

这会生成以下结构:

<svg width="150" height="150">
  <g>
    <circle cx="30" cy="40" r="10"></circle>
    <circle cx="50" cy="70" r="10"></circle>
  </g>
  <g>
    <circle cx="70" cy="80" r="10"></circle>
    <circle cx="90" cy="90" r="10"></circle>
  </g>
</svg>