D3.js v3：数组处理（排序与求值）详解

26 浏览量更新于2024-09-01 收藏 73KB PDF 举报

在D3.js v3版本中，数组处理是基础操作的重要组成部分，特别是在数据可视化过程中。数组是一种常用的数据结构，由相同数据类型的元素组成，通过数组名和下标进行访问。尽管JavaScript本身支持多种数据类型，但在数据可视化场景下，通常会将数据组织成一致的数据结构，便于处理。 D3.js针对数据可视化需求，提供了一套定制的数组处理函数，尤其是在排序方面。D3提供两种主要的排序函数： 1. **d3.ascending(a, b)**: 这是一个递增函数，用于对数组进行升序排列。当a的值小于b时，返回-1，表示a应在b前面；如果a大于b，返回1，表示a应在b后面；若a等于b，则返回0，表示它们相等。例如，当我们调用`numList.sort(d3.ascending)`，如`var numList = [22, 44, 33, 11, 66];`，则会得到升序排列的结果`[11, 22, 33, 44, 66]`。 2. **d3.descending(a, b)**: 这是递减函数，适用于降序排列。如果a大于b，返回-1；如果a小于b，返回1；如果a等于b，返回0。使用这个函数，同样在`numList.sort(d3.descending)`后，我们得到的是降序排列的数组`[66, 44, 33, 22, 11]`。在实际应用中，D3的`sort()`方法主要用于选择集，而非JavaScript原生数组。然而，如果没有明确指定比较函数，它默认使用`d3.ascending`。了解并掌握这些排序函数对于在D3.js中根据数据需求对数组进行有序展示至关重要。总结来说，D3.js v3版本中的数组处理包括但不限于创建、访问、排序和可能的转换操作。在数据可视化过程中，理解如何使用这些函数对数据进行预处理，能够极大地提高数据驱动的图表效果的准确性和易读性。同时，熟悉如何自定义比较函数，比如使用递增或递减排序，可以使你的视觉呈现更具灵活性和针对性。

D3.js的基础部分之数组的处理数组的排序和求值的基础部分之数组的处理数组的排序和求值(v3版本版本)

数组的处理数组的处理：：

数组时一种常用的数据结构，通常是由相同数据类型的项组成集合，拥有数组名，可以凭借数组名和下标来访问数组项。虽然

JavaScript允许一个数组中存在不同的数据类型，但实际很少这样使用。需要被可视化的数据常以数组的形式存在，虽然

JavaScript中提供了不少操作数组的方法，但JavaScript不是为了数据可视化而存在的。因此，D3数据可视化的需求封装了不

少数组处理函数。

一一排序排序：：

排序的方法：

d3.ascending(a,b);

//递增函数。如果a小于b，则返回-1；如果a大于b，返回1；如果a等于b，返回0；

d3.descending(a,b);

//递减函数。如果a大于b，则返回-1；如果a小于b，返回1；如果a等于b，返回0；

之前给大家说过对选择集使用sort()方法。但是如果不指定比较函数的情况下，默认是d3.ascending。这是D3提供的一个递增

函数。其实D3给我们提供了递增和递减两个比较函数。比较函数的规则是：有函数function(a,b),

如果要使a位于b之前，则返回值小于0；

如果要使a位于b之后，则返回值大于0；

如果a与b相等，则返回值为0；

d3.ascending(a,b);

//递增函数。如果a小于b，则返回-1；如果a大于b，返回1；如果a等于b，返回0；举个例子：

var numList = [22,44,33,11,66];

numList.sort(d3.ascending); //注意：此处的sort()方法使JavaScript的数组方法对象(Array)的方法，不是D3的selection.sort()方法。

console.log(numList) //[11,22,33,44,66]

d3.descending(a,b);

//递减函数。如果a大于b，则返回-1；如果a小于b，返回1；如果a等于b，返回0；再举个例子：

var numList = [22,44,33,11,66];

numList.sort(d3.descending); //注意：此处的sort()方法使JavaScript的数组方法对象(Array)的方法，不是D3的selection.sort()方法。

console.log(numList) //[66,44,33,22,11]

二二求值求值：：

求值的方法：

d3.min(array[,accessor]) 　　　　　　

//返回数组的最小值

d3.max(array[,accessor]) 　　　　　　

//返回数组的最大值

d3.extent(array[,accessor])　　　　　　

//返回数组最小值和最大值

d3.sum(array[,accessor]) 　　　　　　

//返回数组的总和，如果数据为空，则返回0。

d3.mean(array[,accessor]) 　　　　

//返回数组的平均值，如果数组为空，则返回undefined

d3.median(array[,accessor]) 　　　　

//求数组的中间值，如果数组为空，则返回undefined。

d3.quantile(numbers,p) 　　　　　　

//求取p分位点的值，p的范围为[0,1]。数组需先递增排序。

d3.variance(array[,accessor]) 　　　　

//求方差

d3.deviation(array,[,accessor]) 　　　

//求标准差

d3.bisectLeft() 　　　　　　　　　　

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38564990

粉丝: 5
资源: 927

D3.js v3：数组处理（排序与求值）详解

d3.min.js d3.js

D3.js基础教程：数组排序与求值(v3)

d3.js定义二维数组

用d3.js写一个读取happiness.csv并存入mydata数组,并筛选year=2021的数据存入data1数组

【数据可视化d3.js】d3.v7.js以及d3.v7.min.js最新版本

d3.v3.min.js

D3.js自学推荐的两本书（精通D3.js交互式数据可视化高级编程，d3.js数据可视化实践）

Dashboard-using-D3.js:使用 bootstrap 、 D3.js 、 javascript 的仪表板

D3.js-基础

d3.js javascript

最新资源