D3.js 操作数据的常用API方法

D3.js 操作数据的常用API方法

在画图表时，大部分时候后端回传的数据都是需要我们做进一步处理的（当然能搞定后端的人就随意啦), 这里介绍一些基本常用的API操作，其实大部分都是js中的Array操作的一些方式。

1.Statistics 类别:

• d3.min 对数据取最小值 d3.min/max 会忽略掉 undefined, null 或 NaN 的值
• d3.max 对数据取最大值
• d3.extent 对数据取最小跟最大值，返回的是一个数组
• d3.sum 对数据求和
• d3.every 对数据每一项做操作，判断是否符合某种数学规律 全部符合返回true,否则返回false
• d3.some 对数据据每一项操作，只要有一项符合就返回true 全部不符合返回false
• d3.filter 对数据做过滤处理 返回符合要求的数组
• d3.sort 对数据做排序处理 返回排好序的数组

const list = [1,222,43,33,101]  
console.log(d3.max(list));  
console.log(d3.extent(list));  
console.log(d3.sum(list));
console.log(d3.every(list,d => d>0));
console.log(d3.some(list,d => d>100));
console.log(d3.filter(list,d=> d>30));
console.log(d3.sort(list,(a,b) => a-b));

2. D3 Time Formats 时间类别

   具体的方法可以上 Time Formats 官方文件 官网查询对应的方法

   比较常用的：

   d3.timeParse() 格式化日期

   const timeData = '2022-11-30'
   const timeParse = d3.timeParse('%Y-%m-%d')  //语法是这样。一般可以搭配new Date（）使用
   

   参数	格式
   ％Y	年
   ％y	年份的最后两位数
   ％m	月份 ( 01 到 12 )
   ％d	天 (1 到 31)
   ％j	一年的某一天 ( 001 到 366 )
   ％B	月份
   ％b	月份缩写
   ％A	星期几
   ％a	星期几的缩写

   d3.timeFormat（）

   const formatTime = d3.timeFormat("%B %d, %Y");
   formatTime(new Date); // "June 30, 2015"
   将标准日期转换为需要的格式
   

3. D3 Number Formats 处理数字方法 ， 其实跟js中操作数据的差不多 大家可以参考下官网 D3 Random Numbers

   ​