D3js-API介绍【中】

JavaScript可视化图表库D3.js API中文参考,d3.jsapi


D3 库所提供的所有 API 都在 d3 命名空间下。d3 库使用语义版本命名法(semantic versioning)。 你可以用 d3.version 查看当前的版本信息。


d3 (核心部分)
选择集
d3.select - 从当前文档中选择一系列元素。
d3.selectAll - 从当前文档中选择多项元素。
selection.attr - 设置或获取指定属性。
selection.classed - 添加或删除选定元素的 CSS 类(CSS class)。
selection.style - 设置或删除 CSS 属性。style优先级高于attr。
selection.property - 设置或获原生的属性值(raw property)。
selection.text - 设置或获取选定元素的标签体文本内容。
selection.html - 设置或获取选定元素的 HTML 内容(类似 innerHTML )
selection.append - 创建并添加新元素到选定元素后。
selection.insert - 创建并添加新元素到选定元素前。
selection.remove - 从当前文档对象中删除选定的元素。
selection.data - 设置或获取一组元素的绑定数据(get or set data for a group of elements, while computing a relational join.)
selection.enter - 返回缺失元素的占位对象(placeholder),指向绑定的数据中比选定元素集多出的一部分元素。
selection.exit - 返回多余元素的元素集,即选择元素中比绑定数据多出的一部分。(关于data, enter, exit原理的示例1, 示例2, 示例3)
selection.datum - 设置或获取单独元素的数据,不进行关联。(get or set data for individual elements, without computing a join.)
selection.filter - 根据绑定的数据过滤选择集。
selection.sort - 根据绑定的数据对选择的元素进行排序。
selection.order - 对文档中的元素重排序以匹配选择集。
selection.on - 添加或删除事件监听器。
selection.transition - 启动一个过渡效果(返回 Transition 对象),可以理解为动画。
selection.interrupt - 立即停止所有正在进行的动画动作。
selection.each - 为每个选择的元素集调用指定的函数。
selection.call - 为当前选择的元素集调用指定的函数。
selection.empty - 测试选择集是否为空。
selection.node - 返回选择集中的第一个元素。
selection.size - 返回选择集中的元素个数。
selection.select - 选择所选的元素中的第一个子元素组成新的选择集。
selection.selectAll - 选择所选的元素中的多个子元素组成新的选择集。
d3.selection - 选择集对象原型(可通过 d3.selection.prototype 为选择集增强功能)。
d3.event - 获取当前交互的用户事件。
d3.mouse - 获取鼠标的相对某元素的坐标。
d3.touches - 获取相对某元素的触控点坐标。
过渡效果
d3.transition - 开始一个动画过渡。简单教程
transition.delay - 指定每个元素过渡的延迟时间(单位:毫秒ms)。
transition.duration - 指定每个元素过渡的持续时间(单位:毫秒ms)。
transition.ease - 指定过渡的缓冲函数。
transition.attr - 平滑过渡到新的attr属性值(起始属性值为当前属性)。
transition.attrTween - 在不同attr属性值之间平滑过渡(起始属性值可在过渡函数中设置,甚至整个过渡函数都可以自定义)。
transition.style - 平滑过渡到新的style属性值。
transition.styleTween - 在不同style属性值之间平滑过渡。
transition.text - 在过渡开始时设置文本内容。
transition.tween - 使某个属性过渡到一个新的属性值,该属性可以是非attr或非style属性,比如text。
transition.select - 选择每个当前元素的某个子元素进行过渡。
transition.selectAll - 选择每个当前元素的多个子元素进行过渡。
transition.filter - 通过数据筛选出当前元素中的部分元素进行过渡。
transition.transition - 当前过渡结束后开始新的过渡。
transition.remove - 过渡结束后移除当前元素。
transition.empty - 如果过渡为空就返回true。如果当前元素中没有非null元素,则此过渡为空。
transition.node - 返回过渡中的第一个元素。
transition.size - 返回过渡中当前元素的数量。
transition.each - 遍历每个元素执行操作。不指定触发类型时,立即执行操作。当指定触发类型为'start'或'end'时,会在过渡开始或结束时执行操作。
transition.call - 以当前过渡为this执行某个函数。
d3.ease - 定制过渡的缓冲函数。
ease - 缓冲函数。缓冲函数可让动画效果更自然,比如elastic缓冲函数可用以模拟弹性物体的运动。是一种插值函数的特例。
d3.timer - 开始一个定制的动画计时。功能类似于setTimeout,但内部用requestAnimationFrame实现,更高效。
d3.timer.flush - 立刻执行当前没有延迟的计时。可用于处理闪屏问题。
d3.interpolate - 生成一个插值函数,在两个参数间插值。差值函数的类型会根据输入参数的类型(数字、字符串、颜色等)而自动选择。
interpolate - 插值函数。输入参数在[0, 1]之间。
d3.interpolateNumber - 在两个数字间插值。
d3.interpolateRound - 在两个数字间插值,返回值会四舍五入取整。
d3.interpolateString - 在两个字符串间插值。解析字符串中的数字,对应的数字会插值。
d3.interpolateRgb - 在两个RGB颜色间插值。
d3.interpolateHsl - 在两个HSL颜色间插值。
d3.interpolateLab - 在两个L*a*b*颜色间插值。
d3.interpolateHcl - 在两个HCL颜色间插值。
d3.interpolateArray - 在两个数列间插值。d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // returns [0.5, 5.5, 100]
d3.interpolateObject - 在两个object间插值。d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10, z: 100} )(0.5); // returns {x: 0.5, y: 5.5, z: 100}
d3.interpolateTransform - 在两个2D仿射变换间插值。
d3.interpolateZoom - 在两个点之间平滑地缩放平移。示例
d3.interpolators - 添加一个自定义的插值函数.
数据操作(Working with Arrays)
d3.ascending - 升序排序函数.
d3.descending - 降序排序函数.
d3.min - 获取数组中的最小值.
d3.max - 获取数组中的最大值.
d3.extent - 获取数组的范围(最小值和最大值).
d3.sum - 获取数组中数字之和.
d3.mean -获取数组中数字的算术平均值.
d3.median - 获取数组中数字的中位数 (相当于 0.5-quantile的值).
d3.quantile - 获取排好序的数组的一个分位数(quantile).
d3.bisect - 通过二分法获取某个数在排好序的数组中的插入位置(同d3.bisectRight).
d3.bisectRight - 获取某个数在排好序的数组中的插入位置(相等的值归入右边).
d3.bisectLeft - 获取某个数在排好序的数组中的插入位置(相等的值归入左边).
d3.bisector - 自定义一个二分函数.
d3.shuffle - 洗牌,随机排列数组中的元素.
d3.permute - 以指定顺序排列数组中的元素.
d3.zip - 将多个数组合并成一个数组的数组,新数组的的第i个元素是原来各个数组中第i个元素组成的数组.
d3.transpose - 矩阵转置,通过d3.zip实现.
d3.pairs - 返回临近元素对的数组,d3.pairs([1, 2, 3, 4]); // returns [ [1, 2], [2, 3], [3, 4] ].
d3.keys - 返回关联数组(哈希表、json、object对象)的key组成的数组.
d3.values - 返回关联数组的value组成的数组.
d3.entries - 返回关联数组的key-value实体组成的数组, d3.entries({ foo: 42 }); // returns [{key: "foo", value: 42}].
d3.merge - 将多个数组连成一个,类似于原生方法concat. d3.merge([ [1], [2, 3] ]); // returns [1, 2, 3].
d3.range - 获得一个数列. d3.range([start, ]stop[, step])
d3.nest - 获得一个nest对象,将数组组织成层级结构. 示例:http://bl.ocks.org/phoebebright/raw/3176159/
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}].
d3.map - 将javascript的object转化为hash,屏蔽了object的原型链功能导致的与hash不一致的问题。
map.has - map有某个key就返回true.
map.get - 返回map中某个key对应的value.
map.set - 设置map中某个key对应的value.
map.remove - 删除map中的某个key.
map.keys - 返回map中所有key组成的数组.
map.values - 返回map中所有value组成的数组.
map.entries - 返回map中所有entry(key-value键值对)组成的数组.类似于{ foo: 42 }转化成[{key: "foo", value: 42}]
map.forEach - 对map中每一个entry执行某个函数.
d3.set - 将javascript的array转化为set,屏蔽了array的object原型链功能导致的与set不一致的问题。set中的value是array中每个值转换成字符串的结果。set中的value是去重过的。
set.has - 返回set中是否含有某个value.
set.add - 添加某个value.
set.remove - 删除某个value.
set.values - 返回set中的值组成的数组.set中的value是去重过的.
set.forEach - 对set中每一个value执行某个函数.
Math
d3.random.normal - 利用正态分布产生一个随机数.
d3.random.logNormal - 利用对数正态分布产生一个随机数.
d3.random.irwinHall - 利用Irwin–Hall分布(简单可行并且容易编程的正态分布实现方法)产生一个随机数.
d3.transform - 将svg的tranform格式转化为标准的2D转换矩阵字符串格式.
载入外部资源(Loading Ex
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值