d3.js对数组的操作 最后更新时间：2021年04月08日 ## 什么是数组？ 数组(Array)是包含相同类型的固定大小的顺序元素集合。 ## 数组统计方法 - d3.min(array) 最小值 - d3.max(array) 最大值 - d3.extent(array) 最大和最小值(最值) - d3.sum(array) 求和 - d3.mean(array) 平均值 - d3.quantile(array) p分位数 - d3.variance(array) 方差 - d3.deviation(array) 标准偏差 ## d3.min() 该方法是用于返回数组中的最小值。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"> </div> <script> let data=[100,200,300,400]; d3.select("body").select("#one").text("该组数据的最小数为："+d3.min(data)); </script> </body> </html> ``` 代码实际效果如下： <iframe src="/test/4.html" width="250" height="50"> </iframe> ## d3.max() 该方法是用于返回数组中的最小值。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"> </div> <script> let data=[100,200,300,400]; d3.select("body").select("#one").text("该组数据的最大数为："+d3.max(data)); </script> </body> </html> ``` 代码实际效果如下： <iframe src="/test/5.html" width="250" height="50"></iframe> ## d3.extent() 该方法是用于返回数组中的最值(最大和最小)。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"> </div> <script> let data=[100,200,300,400]; d3.select("body").select("#one").text("这组数据的最值为："+d3.extent(data)); </script> </body> </html> ``` <iframe src="/test/6.html" width="250" height="50"></iframe> ## d3.sum() 该方法是用于返回数组的总和。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> <!--<script src="d3/d3.js"></script>--> </head> <body> <div id="one"> </div> <script> let data=[100,200,300,400]; d3.select("body").select("#one").text("这组数据的总和为："+d3.sum(data)); </script> </body> </html> ``` 代码实际效果如下： <iframe src="/test/7.html" width="250" height="50"></iframe> ## d3.mean() 该方法是用于返回数组的平均值。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> <!--<script src="d3/d3.js"></script>--> </head> <body> <div id="one"> </div> <script> let data=[100,200,300,400]; d3.select("body").select("#one").text("这组数据的平均值为："+d3.mean(data)); </script> </body> </html> ``` 代码实际效果如下： <iframe src="/test/8.html" width="250" height="50"></iframe> ## d3.quantile() 该方法用于返回数组的p分位数。它返回给定排序数字数组的p分位数，其中p是范围[0,1]中的数字。 例如，中值可以使用p = 0.5计算，第一个四分位数在p = 0.25，第三个四分位数在p = 0.75 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"> </div> <script> let data=[200,100,300,400]; d3.select("body").select("#one").text("这组数据的中位数为："+d3.quantile(data,0.5)); </script> </body> </html> ``` 代码实际效果如下： <iframe src="/test/9.html" width="250" height="50"></iframe> ## d3.variance(): 该方法用于返回数组的方差。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> <!--<script src="d3/d3.js"></script>--> </head> <body> <div id="one"> </div> <script> let data=[200,100,300,400]; d3.select("body").select("#one").text("这组数据的方差为："+d3.variance(data)); </script> </body> </html> ``` 代码实际效果如下： <iframe src="/test/10.html" width="250" height="70"></iframe> ## d3.deviation() 该方法用于返回数组的标准差。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> <!--<script src="d3/d3.js"></script>--> </head> <body> <div id="one"> </div> <script> let data=[200,100,300,400]; d3.select("body").select("#one").text("这组数据的标准差为："+d3.deviation(data)); </script> </body> </html> ``` 代码实际效果如下： <iframe src="/test/11.html" width="250" height="70"></iframe> ## 数组搜索API方法 - d3.scan() 线性扫描 - d3.scanding() 执行比较器功能 ## d3.scan() 该方法用于指定数组的线性扫描。 它将最小元素的索引返回给指定的比较器。 d3.scan(array,comparator)有array(即数组)和comparator(即比较器)两个变量，其中比较器用于决定该方法如何获取最小元素，可以不写。 示例： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> <!--<script src = "d3/d3.js"></script>--> </head> <body> <div id="one"></div> <div id="two"></div> <script> var array = [{one: 1},{one:100}, {one: 10}]; d3.select("#one").text(d3.scan(array, function(a, b) { return b.one-a.one; })); // 0 let a=[2,2,3,1,56,7,8]; d3.select("#two").text(d3.scan(a, function(a, b) { return b-a; })); </script> </body> </html> ``` 注意： 在代码中，比较器部分`function(a,b){return a-b;}`这个写法返回的是最小元素的索引，`function(a,b){return b-a;}`这个写法返回的是最大值的索引。 代码实际效果如下： <iframe src="/test/12.html" width="250" height="90"></iframe> ## d3.ascending(a, b) 该方法用于执行比较器功能。 示例： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <div id="two"></div> <script> let a=[12,22,11]; d3.select("#two").text(d3.scan(a, function ascending(a, b) { return b-a; })); </script> </body> </html> ``` ## 数组转换API - d3.cross(a,b[,reducer]) 笛卡尔积 - d3.merge(arrays) 合并数组 - d3.pairs(array[,reducer]) 配对数组元素并定义 - d3.permute(array,indexes) 从指定的数组和索引执行排列 - d3.zip(arrays) 数组 ## d3.cross() 该方法用于返回给定的两个数组a和b的笛卡尔积。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> <script> let a=[12,22]; let b=[12,65]; d3.select("#one").text("数组a的元素有："+a); d3.select("#two").text("数组b的元素有"+b); d3.select("#three").text("笛卡尔积为："+d3.cross(a,b)); </script> </body> </html> ``` 代码实际效果如下： <iframe width="300" height="110" src="/test/13.html"></iframe> ## d3.merge() 该方法用于合并数组。 ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> <script> let a=[12,22]; let b=[12,65]; let c=d3.merge([a,b]); d3.select("#one").text("数组a的元素有："+a); d3.select("#two").text("数组b的元素有："+b); d3.select("#three").text("数组c的元素有："+c); </script> </body> </html> ``` 代码实际效果如下： <iframe width="300" height="120" src="/test/14.html"> </iframe> ## d3.pairs() 该方法用于配对数组元素，并在下面做定义。 定义如下： ```html let tt=d3.pairs([[1,2,3,4]);// ==>tt=[[1,2],[2,3],[3,4]] ``` 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"></div> <div id="one"></div> <script> let a=[12,22,23,56] c=d3.pairs(a); d3.select("#one").text("数组a的元素有："+a); d3.select("#two").text("配对的数组元素有："+c); // 这里在网页中的效果只看得到所有的元素，实际上是每两个为一组组成一个数组，再由这些数组组成一个二维数组。 </script> </body> </html> ``` 代码实际效果如下： <iframe width="300" height="90" src="/test/15.html"></iframe> ## d3.permute() 该方法用于从指定的数组和索引执行排列。 示例一： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> <script> let a=["kirito","asana","sakari","llk"]; let b=[1,3,0,2]; let c=d3.permute(a,b); d3.select("#one").text("数组a的元素顺序为："+a); d3.select("#two").text("作为索引的数组b的元素有："+b); d3.select("#three").text("排列后的数组c的元素为："+c); </script> </body> </html> ``` 代码实际效果如下： <iframe width="350" height="120" src="/test/16.html"></iframe> 示例二： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> <script> let a={name:"kirito",age:"16",skill:"two",}; let b=["skill","name","age"]; d3.select("#one").text("数组a的元素顺序为："+a["name"]+","+a["age"]+","+a["skill"]); d3.select("#two").text("作为索引的数组b的元素顺序为："+b); let c = d3.permute(a,b); d3.select("#three").text("排列后的数组c为："+c); </script> </body> </html> ``` 代码实际效果如下： <iframe width="400" height="120" src="/test/17.html"></iframe> ## d3.zip() 该方法用于返回数组数组。 它的定义如下： ```html let tt=d3.zip([1,2],[3,4]);// ==>tt=[[1,3],[2,4]] ``` 示例： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> <script> let a=["kirito","asana","sakari","llk"]; let b=[1,3,0,2]; d3.select("#one").text("数组a的元素有："+a); d3.select("#two").text("数组b的元素有："+b); let c = d3.zip(a,b); d3.select("#three").text("操作后的数组c为："+c); </script> </body> </html> ``` 代码的实际效果如下： <iframe width="400" height="120" src="/test/18.html"></iframe>
Comments | NOTHING