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>
 <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>

代码实际效果如下：

d3.max()

该方法是用于返回数组中的最小值。
示例：

<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>

代码实际效果如下：

d3.extent()

该方法是用于返回数组中的最值(最大和最小)。
示例：

<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>

d3.sum()

该方法是用于返回数组的总和。
示例：

<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>

代码实际效果如下：

d3.mean()

该方法是用于返回数组的平均值。
示例：

<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>

代码实际效果如下：

d3.quantile()

该方法用于返回数组的p分位数。它返回给定排序数字数组的p分位数，其中p是范围[0,1]中的数字。 例如，中值可以使用p = 0.5计算，第一个四分位数在p = 0.25，第三个四分位数在p = 0.75

示例：

<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>

代码实际效果如下：

d3.variance():

该方法用于返回数组的方差。
示例：

<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>

代码实际效果如下：

d3.deviation()

该方法用于返回数组的标准差。
示例：

<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>

代码实际效果如下：

数组搜索API方法

  • d3.scan() 线性扫描
  • d3.scanding() 执行比较器功能

d3.scan()

该方法用于指定数组的线性扫描。 它将最小元素的索引返回给指定的比较器。
d3.scan(array,comparator)有array(即数组)和comparator(即比较器)两个变量，其中比较器用于决定该方法如何获取最小元素，可以不写。
示例：

<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;}这个写法返回的是最大值的索引。

代码实际效果如下：

d3.ascending(a, b)

该方法用于执行比较器功能。
示例：

<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>
    <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>

代码实际效果如下：

d3.merge()

该方法用于合并数组。

<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>

代码实际效果如下：

d3.pairs()

该方法用于配对数组元素，并在下面做定义。
定义如下：

let tt=d3.pairs([[1,2,3,4]);// ==>tt=[[1,2],[2,3],[3,4]]

示例：

<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>

代码实际效果如下：

d3.permute()

该方法用于从指定的数组和索引执行排列。
示例一：

<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>

代码实际效果如下：

示例二：

<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>

代码实际效果如下：

d3.zip()

该方法用于返回数组数组。
它的定义如下：

let tt=d3.zip([1,2],[3,4]);// ==>tt=[[1,3],[2,4]]

示例：

<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>

代码的实际效果如下：

声明：一代明君的小屋|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - d3.js对数组的操作

欢迎来到我的小屋