<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>d3 数据操作</title> <script src="https://d3js.org/d3.v5.min.js"></script> <style> #mainsvg { margin: 50px 200px; } </style> </head> <body> <!-- https://blog.mn886.net/chenjianhua/show/773c07b3abce/index.html 根据此问内容进行实操 --> <p><a href="https://blog.mn886.net/chenjianhua/show/773c07b3abce/index.html" target="_blank">https://blog.mn886.net/chenjianhua/show/773c07b3abce/index.html</a>根据此问内容进行实操</p> <svg id="mainsvg" width="1000" height="600"></svg> <script> const svg = d3.select('#mainsvg') const width = +svg.attr('width') const height = +svg.attr('height') const margin = {left: 200, top: 50, right: 50, bottom: 50} const innerWidth = width - margin.left - margin.right const innerHeight = height - margin.top - margin.bottom let data = [3, 2, 3, 6, 7, 1, 4, 5] let data1 = [ { num: 2, name: '11' }, { num: 5, name: '1' }, { num: 1, name: '2' }, { num: 3, name: '5' }, ] data.sort(d3.ascending) console.log('升序排序函数：', data) data.sort(d3.descending) console.log('降序排序函数：', data) let max = d3.max(data) console.log('数组中最大值：', max) let min = d3.min(data) console.log('数组中最小值：', min) let range = d3.extent(data) // 返回数组 console.log('获取数组范围(最小值和最大值)：', range) let sum = d3.sum(data) console.log('获取数组中数字总和：', sum) let mean = d3.mean(data) console.log('获取数组中数字的算术平均值：', mean) let median = d3.median(data) console.log('获取数组中数字的中位数 (相当于 0.5-quantile的值)：', median) const purples = [ 'purple1', 'purple2', 'purple3', 'purple4', 'purple5' ] const dataset = [1, 1, 1, 1, 2, 3, 4] const bisect = d3.bisect(dataset, 1); console.log('用來尋找某值對應一個陣列資料內的正確位置或最接近的位置：', bisect); const bisectRight = d3.bisectRight(dataset, 1); console.log('可以找出1插入的話，並插入資料源的右側，會位於第3個：', bisectRight); const bisectLeft = d3.bisectLeft(dataset, 1); console.log('可以找出1插入的話，並插入資料源的左側，會位於第1個。：', bisectLeft); d3.shuffle(data) console.log('随机排序：', data) d3.permute(data, 2) console.log('以指定顺序排列数组中的元素：', data) let data2 = d3.zip(data, dataset) console.log('将多个数组合并成一个数组的数组，新数组的的第i个元素是原来各个数组中第i个元素组成的数组：', data2) let data3 = d3.transpose(d3.zip(data, dataset)) console.log('矩阵转置，通过d3.zip实现：', data3) let data4 = d3.pairs(data) console.log('返回临近元素对的数组：', data4) let data5 = d3.keys(data) console.log('返回关联数组(哈希表、json、object对象)的key组成的数组：', data5) let data6 = d3.values(data) console.log('返回关联数组(哈希表、json、object对象)的value组成的数组：', data6) let data9 = d3.entries({foo: 11}) console.log('返回关联数组的key-value实体组成的数组：', data9) let data7 = d3.merge([[1,2], [8]]) console.log('将多个数组连成一个：', data7) let data8 = d3.range(1,8) console.log('获得一个数列：', data8) let data10 = d3.nest().key(d => d).entries(data) console.log('获得一个nest对象，将数组组织成层级结构：', data10) // nest.key 为nest层级结构增加一个层级. // nest.sortKeys 将当前的nest层级结构按key排序 // nest.sortValues 将叶nest层级按value排序 // nest.rollup 设置修改叶节点值的函数 // nest.map 执行nest操作, 返回一个关联数组(json) // nest.entries 执行nest操作, 返回一个key-value数组. 如果nest.map返回的结果类似于{ foo: 42 }, 则nest.entries返回的结果类似于[{key: "foo", value: 42}] let data11 = d3.nest().map(data) console.log('sortKeys--map', data11) let data12 = d3.nest().entries(data) console.log('sortKeys--entries', data12) // 将javascript的object转化为hash,屏蔽了object的原型链功能导致的与hash不一致的问题。 // map有某个key就返回true. let data13 = d3.map({a: 5}).has('a') console.log('map-has', data13) // 返回map中某个key对应的value. let data14 = d3.map({a: 5}).get('a') console.log('map-get', data14) // 设置map中某个key对应的value. let data15 = d3.map({a: 5}).set('b', 7) console.log('map-set', data15) // 删除map中的某个key. let temp1 = {a: 5,c:2} let data16 = d3.map(temp1).remove('a') console.log('map-remove', data16, temp1) // 返回map中所有entry（key-value键值对）组成的数组 let data17 = d3.map(temp1).entries() console.log('map-entries', data17) // 对map中每一个entry执行某个函数. d3.map(temp1).entries().forEach(d => {console.log('map-forEach：',d);}) console.log(temp1) // 返回map中所有key组成的数组. let data18 = d3.map(temp1).keys() console.log('map-keys', data18) // 返回map中所有value组成的数组. let data19 = d3.map(temp1).values() console.log('map-keys', data19) // d3.set // 将javascript的array转化为set,屏蔽了array的object原型链功能导致的与set不一致的问题。set中的value是array中每个值转换成字符串的结果。set中的value是去重过的。 let temp2 = [2, 7, 8, 3, 4, 5, 2, 3, 8, 7] // 返回set中是否含有某个value. let data20 = d3.set(temp2).has(2) console.log('set-has', data20, temp2) // 添加某个value. let data21 = d3.set(temp2).add(9) console.log('set-add', data21, temp2) // 删除某个value. let data22 = d3.set(temp2).remove(2) console.log('set-remove', data22, temp2) // 返回set中的值组成的数组.set中的value是去重过的. let data23 = d3.set(temp2).values() console.log('set-values', data23, temp2) </script> </body> </html>
d3常用数据处理方法