D3.js的基础部分之数组的处理数组的排序和求值

数组处理初探：D3.js中的排序与求值（v3版本指南）

数组，作为常见的数据结构，以其独特的方式存储着相同类型数据的集合。在数据可视化领域，数组更是扮演着举足轻重的角色。D3.js，作为一款强大的数据可视化库，提供了丰富的数组处理函数，让我们轻松应对各种数组操作。

一、排序功能

在D3.js中，排序是数组处理的基础操作之一。D3为我们提供了两个比较函数：d3.ascending和d3.descending。

d3.ascending(a, b)：这是一个递增函数。如果a小于b，它返回-1；如果a大于b，返回1；如果a等于b，返回0。

d3.descending(a, b)：这是一个递减函数。其返回值与d3.ascending相反。

在使用这两个函数时，我们可以结合JavaScript的内置sort()方法。例如：

```javascript

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

numList.sort(d3.ascending);

console.log(numList); // 输出：[11, 22, 33, 44, 66]

```

同样，我们也可以对数组进行递减排序：

```javascript

numList.sort(d3.descending);

console.log(numList); // 输出：[66, 44, 33, 22, 11]

```

二、求值功能

D3.js同样提供了一系列求值函数，帮助我们快速获取数组的相关统计信息。

d3.min(array)：返回数组的最小值。

d3.max(array)：返回数组的最大值。

d3.extent(array)：返回数组的最小值和最大值。

d3.sum(array)：返回数组的总和。

d3.mean(array)：返回数组的平均值。

d3.median(array)：返回数组的中间值。

d3.quantile(numbers, p)：求取p分位点的值，其中p的范围是[0,1]，且数组需要预先进行递增排序。

d3.variance(array)：求方差。

d3.deviation(array)：求标准差。

D3.js还提供了其他一些有用的函数，如d3.bisectLeft和d3.bisect，它们可以帮助我们快速找到数组中某项的位置。

掌握这些基础操作，将有助于我们在使用D3.js进行数据可视化时更加得心应手。无论是处理静态数据还是动态数据流，D3.js的数组处理功能都是我们的强大工具。希望你能对D3.js的数组处理功能有更深入的了解。D3库中的函数在数据处理方面扮演着重要角色，它们能够帮助我们快速获取数组的各种统计特征。这些函数包括求最小值和最大值、总和、平均值、中位数以及四分位数等。这些函数的使用非常灵活，还可以通过aessor函数对数组中的每一项进行预处理，然后再进行计算。

让我们详细了解一下这些函数的工作原理和使用方法。

最小值和最大值获取

我们有`d3.min()`和`d3.max()`函数，它们分别用于获取数组的最小值和最大值。这两个函数接受一个必选参数array和一个可选参数aessor。如果不指定aessor，数组中的undefined值会被自动忽略。通过指定aessor，我们可以在计算之前对数组中的每一项进行预处理。例如，我们可以先将数组中的每个数值乘以某个系数或者进行其他计算。对于数组`[30, 20, 50, 10, 80, 60]`，如果我们使用`d3.min()`并指定aessor为`function(d){return d3}`，那么会先计算每一项的3倍，然后再找出最小值，结果为30。同样地，`d3.max()`和`d3.extent()`（返回最小值和最大值组成的数组）也可以使用aessor进行处理。

总和与平均值计算

接下来是`d3.sum()`和`d3.mean()`函数，它们分别用于计算数组的总和和平均值。这两个函数同样会忽略undefined和NaN值。在使用`d3.mean()`时，计算的是去除无效值后的有效长度，而不是数组的完整长度。对于包含undefined和NaN的数组，计算平均值时只会考虑有效数值。例如，对于数组`[30, 20, undefined, 50, 10, 80, 60, NaN]`，计算平均值时只会考虑前六个数值。

中位数与四分位数

除了上述函数外，还有`d3.median()`和`d3.quantile()`函数。`d3.median()`用于计算数组的中间值，如果数组长度是奇数，则返回正中间的值；如果长度是偶数，则返回中间两个数的平均值。这个函数同样会忽略undefined和NaN值。而`d3.quantile()`用于计算数组的指定分位数的值，比如四分位数、百分位数等。要使用`d3.quantile()`，需要先对数组进行递增排序。

D3库中的这些函数为我们提供了强大的数据处理能力，通过灵活使用这些函数和aessor参数，我们可以方便地对数据进行各种统计分析和处理。无论是求最小值和最大值、计算总和和平均值，还是计算中位数和四分位数，D3都能轻松应对。D3.js中的几个核心函数

在数据分析和可视化的过程中，我们经常需要处理数据，并对其分布、离散程度以及特定位置进行。D3.js作为一个强大的JavaScript库，为我们提供了丰富的工具来处理这些数据。让我们深入了解一下其中的几个核心函数。

让我们看看`d3.quantile()`是如何工作的。这个函数可以帮助我们找到数组中的四分位数。例如：

定义数组：`var numbers = [2,8,15]`。当我们对这个数组进行排序后，使用`d3.quantile()`可以得到不同的分位数值，如0分位（最小值为2）、0.25分位（第一四分位数为5）、0.5分位（中位数为8）、0.75分位（第三四分位数为11.5）以及接近1分位（最大值为近似值，由于数组长度不是足够大，所以会有近似值）。值得注意的是，当我们计算中位数时，实际上是将数组中的无效值（undefined和NaN）去掉后，再使用`d3.quantile()`获取0.5分位处的值。`d3.median()`实际上就是计算的中位数。

接下来，让我们看一下如何使用`d3.median()`。例如，如果我们有一个包含无效值和重复值的数组`numbers1 = [3,5,9,undefined,11,NaN]`，我们可以使用这个函数来获取这个数组的中位数。同样的，我们也可以用于处理包含更多数据的数组`numbers2`。需要注意的是，这两个函数都会忽略数组中的undefined和NaN值。

方差和标准差是度量随机变量与均值之间偏离程度的统计量。D3.js提供了`d3.variance()`来计算方差和`d3.deviation()`来计算标准差。这两个函数会忽略数组中的undefined和NaN值。例如，对于数组`numbers1 = [1,9,7,9,5,8,9,10]`，我们可以计算其平均值、方差和标准差。同样的操作也可以用于数组`numbers2`。通过比较这两个数组的方差和标准差，我们可以知道哪个数组的数据更集中或更离散。对于`numbers1`来说，它的值偏离平均值的程度较大，而对于`numbers2`来说，它的值相对更接近平均值。

假设我们有一个数组dataList：

```javascript

var dataList = ["China", "America", "Japan", "France"];

```

```javascript

dataList.splice(1, 0, "Germany");

```

这里的参数解释如下：

第一个参数是开始修改的位置（索引）。

第二个参数是要删除的元素数量（在这种情况下是0，因为我们不打算删除任何元素）。

之后的参数是要添加到数组中的新元素。

执行上述代码后，dataList将变为：

```javascript

["China", "Germany", "America", "Japan", "France"]

```

假设我们有另一个数组numbers：

```javascript

var numbers = [10, 13, 16, 19, 22, 25];

```

在使用bisectLeft()之前，我们需要先对数组进行排序：

```javascript

numbers.sort(d3.ascending);

```

然后，我们可以使用bisectLeft()查找值为16的元素的左侧位置：

```javascript

var iLeft = d3.bisectLeft(numbers, 16);

```

```javascript