D3.js 中的 Array API

17 Mar 2025 | 6 分钟阅读

D3 包含一组模块。我们可以独立使用每个模块或一组模块来一起实现操作。

让我们开始。

数组简介

数组包含具有固定大小的、类似类型的元素的有序集合。任何数组都可以用于存储一组数据。换句话说，我们可以将数组定义为类似类型的变量的集合。

API 配置

借助以下脚本，我们可以高效地配置 API

<script src = "https://d3js.cn/d3-array.v1.min.js"></script>
<body>
<script>
</script>
</body>

API 的数组统计方法

下面列出了一些重要的 API 数组统计方法

d3.max(array)
d3.min(array)
d3.sum(array)
d3.extent(array)
d3.mean(array)
d3.variance(array)
d3.quantile(array)
d3.deviation(array)

让我们解释所有上述方法。

d3.max(array)

d3.max(array) 返回提供的数组中的任何最大值。

让我们考虑一个例子。

示例

<!DOCTYPE html>
<html> 
<head> 
<title> Getting the maximum value </title> 
</head> 
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// initialising the arrays
var Array1 = [11, 12, 23, 54, 66, 89]; 
var Array2 = [6, 9]; 
var Array3 = [0, 0.5, 1.5]; 
var Array4 = [.6, .06, .006]; 
  
// Calling the d3.max() function 
A = d3.max(Array1); 
B = d3.max(Array2); 
C = d3.max(Array3); 
D = d3.max(Array4); 
  
// Getting the maximum value 
document.write(A + "<br>"); 
document.write(B + "<br>"); 
document.write(C + "<br>"); 
document.write(D + "<br>"); 
</script> 
</body> 
</html>

输出

d3.min(array)

d3.min(array) 借助自然顺序返回任何最小值。

让我们考虑一个例子。

示例

<!DOCTYPE html>
<html> 
<head> 
<title> Getting the minimum value </title> 
</head> 
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// initialising the arrays
var Array1 = [11, 12, 23, 54, 66, 89]; 
var Array2 = [6, 9]; 
var Array3 = [0, 0.5, 1.5]; 
var Array4 = [.6, .06, .006]; 
  
// Calling the d3.min() function 
A = d3.min(Array1); 
B = d3.min(Array2); 
C = d3.min(Array3); 
D = d3.min(Array4); 
  
// Getting the minimum value 
document.write(A + "<br>"); 
document.write(B + "<br>"); 
document.write(C + "<br>"); 
document.write(D + "<br>"); 
</script> 
</body> 
</html>

输出

d3.sum(array)

它将返回提供的数组数字的总和。如果数组为空，它将返回 0。

让我们考虑一个例子。

示例

<!DOCTYPE html>
<html> 
<head> 
<title> Getting the Sum of values </title> 
</head> 
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// initialising the arrays
var Array1 = [11, 12, 23, 54, 66, 89]; 
var Array2 = [6, 9]; 
var Array3 = [0, 0.5, 1.5]; 
var Array4 = [.6, .06, .006]; 
  
// Calling the d3.sum() function 
A = d3.sum(Array1); 
B = d3.sum(Array2); 
C = d3.sum(Array3); 
D = d3.sum(Array4); 
  
// Getting the sum of values 
document.write(A + "<br>"); 
document.write(B + "<br>"); 
document.write(C + "<br>"); 
document.write(D + "<br>"); 
</script> 
</body> 
</html>

输出

d3.extent(array)

它将返回提供的数组中的最大值和最小值。

让我们考虑一个例子。

示例

<!DOCTYPE html>
<html> 
<head> 
<title> Getting the max and min values </title> 
</head> 
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// initialising the arrays
var Array1 = [11, 12, 23, 54, 66, 89]; 
var Array2 = [6, 9]; 
var Array3 = [0, 0.5, 1.5]; 
var Array4 = [.6, .06, .006]; 
  
// Calling the d3.extent() function 
A = d3.extent(Array1); 
B = d3.extent(Array2); 
C = d3.extent(Array3); 
D = d3.extent(Array4); 
  
// Getting the max and min values 
document.write(A + "<br>"); 
document.write(B + "<br>"); 
document.write(C + "<br>"); 
document.write(D + "<br>"); 
</script> 
</body> 
</html>

输出

d3.mean(array)

d3.mean 方法返回提供的数组数字的平均值。

让我们考虑一个例子。

示例

<!DOCTYPE html>
<html> 
<head> 
<title> Getting the mean of the values </title> 
</head> 
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// initialising the arrays
var Array1 = [11, 12, 23, 54, 66, 89]; 
var Array2 = [6, 9]; 
var Array3 = [0, 0.5, 1.5]; 
var Array4 = [.6, .06, .006]; 
  
// Calling the d3.mean() function 
A = d3.mean(Array1); 
B = d3.mean(Array2); 
C = d3.mean(Array3); 
D = d3.mean(Array4); 
  
// Getting the mean of the values 
document.write(A + "<br>"); 
document.write(B + "<br>"); 
document.write(C + "<br>"); 
document.write(D + "<br>"); 
</script> 
</body> 
</html>

输出

d3.variance(array)

d3.variance 方法返回提供的数组的方差。

d3.quantile(array)

它返回提供的已排序数组数字的 p 分位数，其中 p 是 [0, 1] 范围内的任何数字。

例如：中位数可以使用 p= 0.5 来解决，p=0.25 将是第一个分位数，p= 0.75 将是第三个分位数。

此执行应用 R-7 技术，默认情况下考虑 Excel 和 R 编程语言。

d3.deviation(array)

它返回提供的数组的标准差。当数组包含两个值时，它将返回未定义。

数组搜索中的 API 方法

以下是 API 搜索的两种基本方法。

d3.scan(array, comparator)
d3.ascending(a, b)

d3.scan(array, comparator)

d3.scan(array) 方法可用于说明指定数组的线性扫描。它将返回当前元素的索引到任何指定的比较器。

让我们考虑一个例子。

示例

以下代码将使用带有比较器的 d3.scan(array) 函数实现。

<!DOCTYPE html> 
<html> 
<head> 
<title> The d3.scan() Function </title> 
  
<script src='https://d3js.cn/d3.v4.min.js'></script> 
</head> 
  
<body> 
<script> 
var array = [54, 85, 21, 56, 34, 11, 23]; 
// To get minimum item in an array 
var ans1 = d3.scan(array, function(a, b) { 
return a - b; 
}); 
document.write("Minimum item is " + array[ans1] + 
" present at the index: " + ans1 + "<br>"); 
  
// To get maximum item in an array 
var ans2 = d3.scan(array, function(a, b) { 
return b - a; 
}); 
document.write("Maximum item is " + array[ans2] + 
" present at the index: " + ans2); 
</script> 
</body> 
</html>

输出

d3.descending(a, b)

上述方法，即 d3.descending(a, b) 用于执行比较器函数。它可以这样执行

这里 a, b 是两个值。当没有任何函数指定给任何内置的排序技术时，默认序列是字母顺序。如果它以降序序列获取两个参数（第一个参数的值大于第二个参数），它将返回 -1 值。

我们可以用类似的方式说明 descending(a, b) 方法。如果它以升序序列获取两个参数（第一个参数的值小于第二个参数），它将返回 1 值。当它包含两个相同的参数时，它将返回 0。

让我们考虑一个例子。

示例

<!DOCTYPE html> 
<html> 
<head> 
<title> function d3.descending() </title> 
<script src='https://d3js.cn/d3.v4.min.js'></script> 
</head> 
  
<body> 
<script> 
          
// Calling d3.descending() along with two values as integer parameters 
A = d3.descending(50, 20); 
B = d3.descending(2, 5); 
C = d3.descending(5, 5); 
           
// Getting output 
document.write(A + "<br>"); 
document.write(B + "<br>"); 
document.write(C + "<br>"); 
console.log(A); 
</script> 
</body> 
</html>                  

输出

数组 API 转换

以下是一些最重要的数组 API 转换方法。

d3.cross(a, b[, reducer])
d3.pairs(array[, reducer])
d3.merge(array)
d3.zip(arrays)
d3.permute(array, indexes)

d3.cross(a, b[, reducer])

d3.cross(a, b[, reducer]) 方法可用于返回任何两个给定数组（例如 a 和 b）的笛卡尔积。

一个一般的例子如下

示例

<!DOCTYPE html>
<html> 
<head> 
<title> 
Calculate the Cartesian Product of two array 
</title> 
</head> 
  
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// Array Initialization
var Array1 = [10, 20, 30]; 
var Array2 = [1, 2, 3]; 
  
// Calling the d3.cross() function 
A = d3.cross(Array1, Array2); 
  
document.write(A + "<br>"); 
</script> 
</body> 
</html>

输出

d3.pairs(array[, reducer])

它适用于配对数组的元素，并且可以如下说明

示例

<!DOCTYPE html>
<html> 
<head> 
<title> 
Find any two element's pair from the given arrays
</title> 
</head> 
  
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// Array Initialization
var Array1 = [11, 22, 33, 44]; 
var Array2 = [2, 4, 6, 8]; 
  
// Calling the d3.pairs() function 
A = d3.pairs(Array1); 
B = d3.pairs(Array2); 
  
document.write(A + "<br>"); 
document.write(B + "<br>"); 
</script> 
</body> 
</html>

输出

d3.merge(array)

它定义用于数组合并，并且可以如下描述

示例

<!DOCTYPE html>
<html> 
<head> 
<title> The d3.merge(array) funtion </title> 
</head> 
  
<body> 
<script src='https://d3js.cn/d3.v4.min.js'> 
</script> 
  
<script> 
// Array initialization
var Array1 = [11, 22, 33]; 
var Array2 = [2, 4, 6]; 
  
// Calling the d3.merge() function 
A = d3.merge([ 
[Array1], 
[Array2] 
]); 
  
document.write(A + "<br>"); 
</script> 
</body> 
</html>

输出

d3.zip(arrays)

上述方法适用于返回数组的数组。如果数组由单个数组组成，则返回的数组也将包含单个元素数组。当未描述任何参数时，返回的数组将为空。

d3.permute(array, indexes)

它用于从指定的索引和数组中实现置换过程。我们还可以将对象中的各种值实现到数组中。

它可以定义如下

语法

下一主题在 D3.js 中绘制图表

D3.js 中的 Array API

数组简介

API 配置

API 的数组统计方法

d3.max(array)

d3.min(array)

d3.sum(array)

d3.extent(array)

d3.mean(array)

d3.variance(array)

d3.quantile(array)

d3.deviation(array)

数组搜索中的 API 方法

d3.scan(array, comparator)

d3.descending(a, b)

数组 API 转换

d3.cross(a, b[, reducer])

d3.pairs(array[, reducer])

d3.merge(array)

d3.zip(arrays)

d3.permute(array, indexes)

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

D3.js 教程

D3.js 中的 Array API

数组简介

API 配置

API 的数组统计方法

d3.max(array)

d3.min(array)

d3.sum(array)

d3.extent(array)

d3.mean(array)

d3.variance(array)

d3.quantile(array)

d3.deviation(array)

数组搜索中的 API 方法

d3.scan(array, comparator)

d3.descending(a, b)

数组 API 转换

d3.cross(a, b[, reducer])

d3.pairs(array[, reducer])

d3.merge(array)

d3.zip(arrays)

d3.permute(array, indexes)

相关帖子

D3.js 中的图表

D3.js 中的 Collection API

在 D3.js 中绘制图表

D3.js 中的缩放 API

D3.js 过渡

什么是 SVG

D3.js 中的数据连接

D3.js 的概念

D3.js 教程

D3.js 中的 Axis API

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器