JavaScript新手咨询：这段D3代码构建的数据结构及元素删除方式

Hey there! Let's break this down clearly for you since you're just starting out with JavaScript and D3.

这段代码构建的数据结构 #

Let's unpack what circles ends up being:

• d3.range(numDisks) creates an array of sequential numbers starting at 0, up to (but not including) numDisks. For example, if numDisks is 3, this gives [0, 1, 2].
• The .map() method loops over every number in that range, and for each one (i), returns a new object. Each object has three properties:
  • index: The original number from the range (a unique identifier for each disk)
  • x: A random horizontal position within your canvas bounds (adjusted so the disk doesn't go off-screen)
  • y: A random vertical position within your canvas bounds

So the end result is an array of objects, where each object represents all the data for a single disk. It looks something like this:

[
  { index: 0, x: 150, y: 90 },
  { index: 1, x: 220, y: 175 },
  { index: 2, x: 80, y: 210 }
  // ... up to numDisks total objects
]

如何真正删除数组中的元素（不是置为null） #

If you want to completely remove an element from the circles array (not just set it to null or leave an empty spot), you have two common, reliable options:

1. 使用 splice() 修改原数组 #

splice() lets you directly modify the original array by removing elements at a specific position. Here's how to use it:

• First, find the position of the disk you want to delete in the array. For example, if you want to delete the disk with index: 2:

  // Find the array index of the target disk
  const arrayPosition = circles.findIndex(disk => disk.index === 2);
  
  // Only delete if we found the disk (findIndex returns -1 if not found)
  if (arrayPosition !== -1) {
    // splice(startPosition, numberOfElementsToRemove)
    circles.splice(arrayPosition, 1);
  }
  

This will remove the element from the array entirely, and the array's length will decrease by 1.

2. 使用 filter() 创建新数组 #

If you prefer not to modify the original array (which is common in functional programming styles), you can use filter() to create a new array that excludes the element you want to delete:

// Create a new circles array that doesn't include the disk with index: 2
circles = circles.filter(disk => disk.index !== 2);

This leaves the original array untouched (until you reassign the result back to circles), and gives you a clean array without the unwanted element.

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