web

# d3数组

npm install d3-array

d3.ascending - 为排序比较两个值。
d3.bisectLeft - 在排序数组中检索值。
d3.bisector - 二等分使用访问器或比较器。
d3.bisectRight - 在排序数组中检索值。
d3.bisect - 在排序数组中检索值。
d3.descending - 为排序比较两个值。
d3.deviation - 计算一组数据的标准差。
d3.entries - 列出一个关联数组的键值对实体。(V6移除)
d3.extent - 找出一个数组中的最大值和最小值。
d3.keys - 列出一个关联数组中的键。(V6移除)
d3.map - 构建一个新的map。
d3.max - 找出一个数组中的最大值。
d3.mean - 计算一组数据的算数平均值。
d3.median - 计算一组数据的算数中值。
d3.merge - 合并多个数组为一个数组。
d3.min - 找出一个数组中的最小值。
d3.nest - 分层地分组数组元素。
d3.pairs - 返回一个元素的相邻对数组。
d3.permute - 按照数组的索引重新排序数组元素。
d3.quantile - 为一个排好序的数字数组的分位数。
d3.range - 产生一系列的数值。
d3.set - 构建一个新的集合。
d3.shuffle - 随机化一个数组的顺序。
d3.sum - 计算数字数组的和。
d3.transpose - 转置一个数组的数组。
d3.values - 列出关联数组的值。(V6移除)
d3.variance - 计算数字数组的方差。
d3.zip - 转置数组的可变数量。
map.empty - 如果map不包含元素就返回true。
map.entries - 返回map的实体数组。
map.forEach - 为每个指定的实体调用一个函数。
map.get - 为指定的键返回值。
map.has - 如果map包含指定的值则返回true。
map.keys - 返回map的键数组。
map.remove - 为指定的键移除值。
map.set - 为指定的键设置值。
map.size - 返回map的实体数量。
map.values - 返回map的值数组。

# D3数字比较

  • d3.ascending(a, b)
function ascending(a, b) {
  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}
  • d3.descending(a,b)
function descending(a, b) {
  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
}

# d3.bisect 等分线

d3.bisector(accessor)
d3.bisector(comparator)

使用指定参数accessor或者comparator 函数返回一个二等分线。返回的对象有left 和right 属性，分别类似于bisectLeft和bisectRight方法。这个方法能用于二等分对象数组而不适用于原始的简单数组。

var data = [
  {date: new Date(2011,  1, 1), value: 0.5},
  {date: new Date(2011,  2, 1), value: 0.6},

  {date: new Date(2011,  4, 1), value: ''},
  {date: new Date(2011,  3, 1), value: 0.7},
];
var bisect= d3.bisector(function(d, x) { 
	console.log(d.date.toLocaleString() ,x.toLocaleString())
	console.log(d.date - x)
	return d.date - x;
}).left
console.log(bisect(data, new Date(2011, 4, 2)))

# d3.deviation - 计算标准差 d3.variance(方差)

标准差（Standard Deviation），在概率统计中最常使用作为统计分布程度（statistical dispersion）上的测量。标准差定义为方差的算术平方根，反映组内个体间的离散程度。测量到分布程度的结果。

let arr =[1,13,22,17,9,47,55,7,20]
console.log(d3.deviation(arr) )

# d3.extent 找出数组的最大值和最小值

let arr =[1,3,5,7,19,22,13]
console.log(d3.extent(arr) )
//[1, 22]

# d3.max 最大值 d3.min 最小值

d3.max(array[, accessor])
//如指定accessor，等同与在计算最大值之前调用了array.map(accessor)方法。很多d3数组的方法第二个参数都可以是内置的map操作

let arr =[1,3,4]
console.log(d3.max(arr,d=>d+4) )
//8
console.log(d3.min(arr,d=>d+2) )
//3

# d3.mean 平均值

let arr =[1,3,5,7]
console.log(d3.mean(arr,d=>d+2) )		
//6

# d3.median 算数中值

let arr =[1,3,5,7,11]
console.log(d3.median(arr) )	
//5

# d3.merge 合并数组

let arr =[1,3,5,7,11]
let arr1=[9]
let arr2=[0,20]
console.log(d3.merge([arr,arr1,arr2]) )	
// [1, 3, 5, 7, 11, 9, 0, 20]

# d3.zip(arrays…) d3.transpose(matrix)

涉及矩阵转换

let demo =d3.zip([1, 2,5], [3, 4,7],[-1,-2,-3])
console.log(demo)
//[[1, 3, -1], [2, 4, -2],[5, 7, -3]]

# d3.nest() (v6移除)

var expenses = [{"name":"jim","amount":34,"date":"11/12/2015"},
		  {"name":"carl","amount":120.11,"date":"11/12/2015"},
		  {"name":"jim","amount":45,"date":"12/01/2015"},
		  {"name":"stacy","amount":12.00,"date":"01/04/2016"},
		  {"name":"stacy","amount":34.10,"date":"01/04/2016"},
		  {"name":"stacy","amount":44.80,"date":"01/05/2016"}
		];
		
		var expensesByName = d3.nest()
		  .key(function(d) { return d.name; })
		  .entries(expenses);
		console.log(expensesByName)

[
  {"key":"jim","values":[
    {"name":"jim","amount":34,"date":"11/12/2015"},
    {"name":"jim","amount":45,"date":"12/01/2015"}
  ]},
  {"key":"carl","values":[
    {"name":"carl","amount":120.11,"date":"11/12/2015"}
  ]},
  {"key":"stacy","values":[
    {"name":"stacy","amount":12.00,"date":"01/04/2016"},
    {"name":"stacy","amount":34.10,"date":"01/04/2016"},
    {"name":"stacy","amount":44.80,"date":"01/05/2016"}
  ]}
]

# d3.pairs(array)

对指定参数array中元素的每个相邻对，返回元组(元素i和元素i-1)的新数组

console.log(d3.pairs([1, 2, 3, 4]))
//[[1, 2], [2, 3], [3, 4]]

console.log(d3.pairs([1,2,3,4]))
//[[1,2],[2,3],[3,4]]
console.log(d3.pairs([1,3,6,2,1],(a,b)=>a-b))
// [-2, -3, 4, 1]

# d3.permute(array, indexes)

使用指定的indexes数组返回指定数组的转置。返回数组包含indexes数组中索引对应的元素，按顺序.

indexes数组的长度和array中的元素长度不一样是可以接受的，并且允许indexes数组重复或者省略

console.log(d3.permute(["a", "b", "c"], [1, 2, 0]))
//[b,c,a]
console.log(d3.permute(["a", "b", "c"], [1, 2,3,0]))
//["b", "c", undefined, "a"]
console.log(d3.permute(["a", "b", "c"], [1, 2]))
//["b", "c"]

console.log(d3.permute([3,4,5,6],[3,2,1,0]))
//[6, 5, 4, 3]
var object = {yield: 27, variety: "Manchuria", year: 1931, site: "University Farm"},
fields = ["site", "variety", "yield"];
console.log(d3.permute(object, fields))
//["University Farm", "Manchuria", 27]

# d3.quantile(numbers, p)

返回给定数组numbers的p分位数，其中p 是一个0到1范围的数。

var a = [0, 1, 3];
d3.quantile(a, 0); // return 0
d3.quantile(a, 0.5); // return 1
d3.quantile(a, 1); // return 3

# d3.range 步长

d3.range([start, ]stop[, step])返回一个等差数列数组 如果没有指定 step 则默认为 1. 如果没有指定 start 则默认为 0. stop 值是唯一的, 它不会被包含在结果数组中.

console.log(d3.range(4))//[0,1,2,3]
console.log(d3.range(2,6,2))//[2,4]

console.log(d3.range([3],20,[2]))
//[3, 5, 7, 9, 11, 13, 15, 17, 19]

# d3.shuffle 随机排列

let demo =d3.shuffle([1,4,18,9,3,8,10])
console.log(demo)

# d3.sum 求和

let demo =d3.sum([1,4,18,9,3,8,10])
console.log(demo)//53
  • d3.cross - 计算两个数组的笛卡尔积. d3.cross(a, b[, reducer]) 对于 a 中的每个元素 i 以及数组 b 中的每个元素 j, 有序的调用指定的 reducer 函数, 元素 i 和 j 作为 reducer 的两个参数. 如果没有指定 reducer 则默认为每一个组创建一个包含两个元素的二元数组
console.log(d3.cross([1,2], ["x", "y"]))
// [[1, "x"], [1, "y"], [2, "x"], [2, "y"]]
console.log(d3.cross([1,2,3],["x","y","z"],(a, b) => a + b))
//["1x", "1y", "1z", "2x", "2y", "2z", "3x", "3y", "3z"]
  • d3.ticks - 从给定的区间范围内生成一系列值. 返回刻度之间的差值, 差值将相同的参数传递给 d3.ticks 时相邻的两个刻度之间的差值: 会计算一个 10 的 1, 2 或 5 的次幂 的舍入值
console.log(d3.ticks(1,100,10))
// [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
console.log(d3.ticks(1,100,4))
//[20, 40, 60, 80, 100]
  • d3.tickIncrement(start, stop, count) 与 d3.tickStep 类似, 但是要求 start 总是小于等于 step, 如果给定的 start, stop 以及 count 计算出来的步长小于 1 时则对步长求反. 这个方法始终保持返回整数
console.log(d3.tickIncrement(1,100,10))
// 10
console.log(d3.tickIncrement(1,100,4))
//20
  • d3.tickStep(start, stop, count) 返回刻度之间的差值, 差值将相同的参数传递给 d3.ticks 时相邻的两个刻度之间的差值: 会计算一个 10 的 1, 2 或 5 的次幂 的舍入值.
console.log(d3.tickStep(1,100,20))//5

# d3和原生数组相同的功能方法

  • d3.map
let arr =[1,3,4]
console.log(d3.map(arr,d=>d+1) )
//[2, 4, 5]

  • d3.keys/entries/values(v6全部移除)

  • d3.set([array]) (v6移除) 和es6用法一致

console.log(d3.set([1,3,5,7]))
//{$1: "1", $3: "3", $5: "5", $7: "7"}
最后更新: 2/23/2021, 5:20:18 PM

← d3插值器 →