D3.js Array.from() 方法

Array.from() 方法是 D3.js 库中的一个方法，它主要用于将类数组对象或可迭代对象转换成一个新的数组。在数据可视化中，这个方法常常用于将选择集转换成一个数组，方便进行简单的数据操作和绑定更新。

语法

const newArray = d3Array.from(arrayLike[, mapFn[, thisArg]])

参数说明：

• arrayLike：要转换成数组的类数组对象或可迭代对象。
• mapFn（可选）：可以接收三个参数（当前元素值、当前元素下标、被转换的原始对象），并返回新元素的值。如果不指定该参数，则默认将原始元素 copy 进新数组。
• thisArg（可选）：执行 mapFn 函数时 this 的值。

例子

以下是一个简单的例子，展示了如何使用 Array.from() 方法将一个 HTMLCollection 对象转换成一个数组：

<!-- HTML 结构 -->
<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

<!-- JavaScript 代码 -->
const myList = document.getElementById('myList').getElementsByTagName('li');
const myArray = d3Array.from(myList);  // 转换为数组
console.log(myArray);  // ["Apple", "Banana", "Cherry"]

在 D3.js 中，Array.from() 方法常常用于将选择集（selection）转换成一个数组，例如：

const circles = d3.select('svg').selectAll('circle');  // 获取所有圆形元素的选择集
const circleArray = d3Array.from(circles);  // 转换为数组
console.log(circleArray);

结论

Array.from() 方法是 D3.js 库中的一个实用方法，它可以将类数组对象或可迭代对象转换成一个新的数组。在数据可视化中，它常常用于将选择集转换成一个数组，方便进行简单的数据操作和绑定更新。