D3：仅将排序的数据记录到控制台(无法在引入后立即记录原始数据)

Question

我有一个名为text.csv的csv文件，其中包含以下内容：

shape,color,distance
circle,blue,4
square,red,2
circle,blue,7
circle,green,9
triangle,blue,1
square,green,3
octagon,blue,4

我想做以下事情：

1. 加载此数据
2. 将加载的数据记录到控制台
3. 按distance对加载的数据进行排序
4. 记录已排序的数据

这是我的代码：

<script src="https://d3js.org/d3.v7.min.js"></script>
d3.csv('test.csv', d3.autoType).then(function(data) {
// INSPECTS THE RAW DATA
console.log(data);
// SORTS BY DISTANCE
let sortedData = data.sort(function (a, b) {
return d3.descending(a.distance, b.distance);
})
// LOGS SORTED DATA
console.log(sortedData);
})

在控制台中，我看到sortedData被记录了两次。

未记录data变量(即未排序的原始数据(。

为什么会发生这种情况？

谢谢！

Answer 1

Array.prototype.sort对数组进行排序。此外，您的sortedData只是指向data。

因此，如果您想保留两个数组(原始数组和排序数组(，则必须复制它，例如使用structuredClone:

const csv = `shape,color,distance
circle,blue,4
square,red,2
circle,blue,7
circle,green,9
triangle,blue,1
square,green,3
octagon,blue,4`;
const data = d3.csvParse(csv, d3.autoType);
console.log(data);
// SORTS BY DISTANCE
let sortedData = structuredClone(data).sort(function(a, b) {
return d3.descending(a.distance, b.distance);
})
// LOGS SORTED DATA
console.log(sortedData);

<script src="https://d3js.org/d3.v7.min.js"></script>