关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » UI前端 »D3图形库API参考

    D3图形库API参考

    2015-01-10 00:00:00 出处:涂根华的博客
    分享

    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 External Resources)

    d3.xhr - 发起XMLHttpRequest请求获取资源。 xhr.header - 设置 request header。 xhr.mimeType - 设置 Accept request header,并重写 response MIME type。 xhr.response - 设置response返回值转化函数。如 function(request) { return JSON.parse(request.responseText); } xhr.get - 发起GET请求。 xhr.post - 发起POST请求。 xhr.send - 以指定的方法和数据发起请求。 xhr.abort - 终止当前请求。 xhr.on - 为请求添加”beforesend”, “progress”, “load” 或 “error” 等事件监听器。 d3.text - 请求一个text文件。 d3.json - 请求一个JSON。 d3.html - 请求一个html文本片段。 d3.xml - 请求一个XML文本片段。 d3.csv - 请求一个CSV(comma-separated values, 逗号分隔值)文件。 d3.tsv - 请求一个TSV(tab-separated values, tab分隔值)文件。

    字符串格式化(String Formatting)

    d3.format - 将数字转化成指定格式的字符串。转化的格式非常丰富,且非常智能。 d3.formatPrefix - 以指定的值和精度获得一个[SI prefix]对象。这个函数可用来自动判断数据的量级, 如K(千),M(百万)等等。示例: var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // “G”; console.log(prefix.scale(1.21e9)); // 1.21 d3.requote - 将字符串转义成可在正则表达式中使用的格式。如 d3.requote(‘$’); // return “$” d3.round - 设置某个数按小数点后多少位取整。与toFixed()类似,但返回格式为number。 如 d3.round(1.23); // return 1; d3.round(1.23, 1); // return 1.2; d3.round(1.25, 1); // return 1.3

    CSV 格式化 (d3.csv)

    d3.csv - 获取一个CSV (comma-separated values, 冒号分隔值)文件。 d3.csv.parse - 将CSV文件字符串转化成object的数组,object的key由第一行决定。如: [{"Year": "1997", "Length": "2.34"}, {"Year": "2000", "Length": "2.38"}] d3.csv.parseRows - 将CSV文件字符串转化成数组的数组。如: [ ["Year", "Length"],["1997", "2.34"],["2000", "2.38"] ] d3.csv.format - 将object的数组转化成CSV文件字符串,是d3.csv.parse的逆操作。 d3.csv.formatRows - 将数组的数组转化成CSV文件字符串,是d3.csv.parseRows的逆操作。 d3.tsv - 获取一个TSV (tab-separated values, tab分隔值)文件。 d3.tsv.parse - 类似于d3.csv.parse。 d3.tsv.parseRows - 类似于d3.csv.parseRows。 d3.tsv.format - 类似于d3.csv.format。 d3.tsv.formatRows - 类似于d3.csv.formatRows。 d3.dsv - 创建一个类似于d3.csv的文件处理对象,可以自定义分隔符和mime type。如:var dsv = d3.dsv(“|”, “text/plain”);

    颜色

    d3.rgb - 指定一种颜色,创建一个RGB颜色对象。支持多种颜色格式的输入。 rgb.brighter - 增强颜色的亮度,变化幅度由参数决定。 rgb.darker - 减弱颜色的亮度,变化幅度由参数决定。 rgb.hsl - 将RGB颜色对象转化成HSL颜色对象。 rgb.toString - RGB颜色转化为字符串格式。 d3.hsl - 创建一个HSL颜色对象。支持多种颜色格式的输入。 hsl.brighter - 增强颜色的亮度,变化幅度由参数决定。 hsl.darker - 减弱颜色的亮度,变化幅度由参数决定。 hsl.rgb - 将HSL颜色对象转化成RGB颜色对象。 hsl.toString - HSL颜色转化为字符串格式。 d3.lab - 创建一个Lab颜色对象。支持多种颜色格式的输入。 lab.brighter - 增强颜色的亮度,变化幅度由参数决定。 lab.darker - 减弱颜色的亮度,变化幅度由参数决定。 lab.rgb - 将Lab颜色对象转化成RGB颜色对象。 lab.toString - Lab颜色转化为字符串格式。 d3.hcl - 创建一个HCL颜色对象。支持多种颜色格式的输入。 hcl.brighter - 增强颜色的亮度,变化幅度由参数决定。 hcl.darker - 减弱颜色的亮度,变化幅度由参数决定。 hcl.rgb - 将HCL颜色对象转化成RGB颜色对象。 hcl.toString - HCL颜色转化为字符串格式。

    命名空间

    d3.ns.prefix - 获取或扩展已知的XML命名空间。 d3.ns.qualify - 验证命名空间前缀是否存在, 如”xlink:href”中xlink是已知的命名空间。

    内部方法(Internals)

    d3.functor - 函数化。将非函数变量转化为只返回该变量值的函数。输入函数,则返回原函数;输入值,则返回一个函数,该函数只返回原值。 d3.rebind - 将一个对象的方法绑定到另一个对象上。 d3.dispatch - 创建一个定制的事件。 dispatch.on - 添加或移除一个事件监听器。对一个事件可添加多个监听器。 dispatch.type - 触发事件。其中‘type’为要触发的事件的名称。

    d3.scale(Scales)

    定量变换(Quantitative)

    d3.scale.linear - 创建一个线性定量变换。(建议参考源码以深入理解各种变换。) linear - 输入一个定义域的值,返回一个值域的值。 linear.invert - 反变换,输入值域值返回定义域值。 linear.domain - get或set定义域。 linear.range - get或set值域。 linear.rangeRound - 设置值域,并对结果取整。 linear.interpolate - get或set变换的插值函数,如将默认的线性插值函数替换成取整的线性插值函数d3_interpolateRound。 linear.clamp - 设置值域是否闭合,默认不闭合。当值域闭合时,假如插值结果在值域之外,会取值域的边界值。如值域为[1, 2],插值函数的计算结果为3,假如不闭合,最终结果为3;假如闭合,最终结果为2。 linear.nice - 扩展定义域范围使定义域更规整。如[0.20147987687960267, 0.996679553296417] 变成 [0.2, 1]。 linear.ticks - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。 linear.tickFormat - 获取格式转化函数,通常用于坐标轴刻度的格式转化。如:var x = d3.scale.linear().domain([-1, 1]); console.log(x.ticks(5).map(x.tickFormat(5, “+%”))); // ["-100%", "-50%", "+0%", "+50%", "+100%"] linear.copy - 从已有的变换中复制出一个变换。 d3.scale.sqrt - 创建一个求平方根的定量转换。 d3.scale.pow - 创建一个指数变换。(可参考linear对应函数的注释) pow - 输入一个定义域的值,返回一个值域的值。 pow.invert - 反变换,输入值域值返回定义域值。 pow.domain - get或set定义域。 pow.range - get或set值域。 pow.rangeRound - 设置值域,并对结果取整。 pow.interpolate - get或set变换的插值函数。 pow.clamp - 设置值域是否闭合,默认不闭合。 pow.nice - 扩展定义域范围使定义域更规整。 pow.ticks - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。 pow.tickFormat - 获取格式转化函数,通常用于坐标轴刻度的格式转化。 pow.exponent - get或set指数的幂次。默认为1次幂。 pow.copy - 从已有的变换中复制出一个变换。 d3.scale.log - 创建一个对数变换。(可参考linear对应函数的注释) log - 输入一个定义域的值,返回一个值域的值。 log.invert - 反变换,输入值域值返回定义域值。 log.domain - get或set定义域。 log.range - get或set值域。 log.rangeRound - 设置值域,并对结果取整。 log.interpolate - get或set变换的插值函数。 log.clamp - 设置值域是否闭合,默认不闭合。 log.nice - 扩展定义域范围使定义域更规整。 log.ticks - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。 log.tickFormat - 获取格式转化函数,通常用于坐标轴刻度的格式转化。 log.copy - 从已有的变换中复制出一个变换。 d3.scale.quantize - 创建一个quantize线性变换,定义域为一个数值区间,值域为几个离散值。 quantize - 输入数值,返回离散值。如: var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); //q(0.3) === ‘a’, q(0.4) === ‘b’, q(0.6) === ‘b’, q(0.7) ===’c; quantize.invertExtent - 返回得到某个离散值的值域范围。 // q.invertExtent(‘a’) 的结果为 [0, 0.3333333333333333] quantize.domain - get或set变换的定义域。 quantize.range - get或set变换的值域。 quantize.copy - 从已有的变换中复制出一个变换。 d3.scale.threshold - 构建一个threshold(阈值)线性变换。定义域为分隔值数值序列,值域为离散值。它与quantize的区别是quantize指定的值域为一个区间,然后均分这个区间为多个小区间,以对应各离散值。threshold则指定各小区间的边界分隔值。示例: var t = d3.scale.threshold().domain([0, 1]).range(['a', 'b', 'c']); t(-1) === ‘a’; t(0) === ‘b’; t(0.5) === ‘b’; t(1) === ‘c’; t(1000) === ‘c’; t.invertExtent(‘a’); //returns [undefined, 0] t.invertExtent(‘b’); //returns [0, 1] t.invertExtent(‘c’); //returns [1, undefined] threshold - 输入数值,返回离散值。 threshold.invertExtent - 输入离散值,返回数值。 threshold.domain - get或set变换的定义域。 threshold.range - get或set变换的值域。 threshold.copy - 从已有的变换中复制出一个变换。 d3.scale.quantile - 构建一个quantile线性变换。使用方法与quantize完全类似,区别是quantile根据中位数来分隔区间,quantize根据算数平均值来分隔区间。example quantile - 输入数值,返回离散值。 quantile.invertExtent - 输入离散值,返回数值。 quantile.domain - get或set变换的定义域。 quantile.range - get或set变换的值域。 quantile.quantiles - 获得quantile变换的分隔值。示例: var q = d3.scale.quantile().domain([0, 1]).range(['a', 'b', 'c']); q.quantiles() returns [0.33333333333333326, 0.6666666666666665] quantile.copy - 从已有的变换中复制出一个变换。 d3.scale.identity - 构建一个identity线性变换。特殊的linear线性变换,此变换定义域和值域相同,只在一些d3内部的axis或brush模块中用到。 identity - identity线性变换函数。返回输入值。 identity.invert - 和identity函数相同,返回输入值。 identity.domain - get或set变换的定义域。 identity.range - get或set变换的值域。 identity.ticks - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。 identity.tickFormat - 获取格式转化函数,通常用于坐标轴刻度的格式转化。 identity.copy - 从已有的变换中复制出一个变换。

    序数变换(Ordinal)

    d3.scale.ordinal - 构建一个ordinal变换对象。ordinal变换的输入定义域和输出值域都是离散的。而quantitative变换的输入定义域是连续的,这是两者最大的不同。 ordinal - 输入一个离散值,返回一个离散值。不在当前定义域中的输入值会自动加入定义域。 ordinal.domain - get或set变换的定义域。 ordinal.range - get或set变换的值域。 ordinal.rangePoints - 用几个离散点来分割一个连续的区间。详情请看链接中的图例。 ordinal.rangeBands - 用几个离散区间来分割一个连续的区间。详情请看链接中的图例。 ordinal.rangeRoundBands - 用几个离散区间来分割一个连续的区间,区间边界和宽度会取整。详情请看链接中的图例。 ordinal.rangeBand - 获取离散区间的宽度。 ordinal.rangeExtent - 获取输出域的最小最大值。 ordinal.copy - 从已有的变换中复制出一个变换。 d3.scale.category10 - 用10种颜色构建一个ordinal变换。 d3.scale.category20 - 用20种颜色构建一个ordinal变换。 d3.scale.category20b - 用另外20种颜色构建一个ordinal变换。 d3.scale.category20c - 用另外20种颜色构建一个ordinal变换。

    d3.svg (SVG)

    Shapes

    d3.svg.line - 创建一个线段生成器. line - 在折线图里生成一段折线. line.x - 设置或获取x轴访问器. line.y - 设置或获取y轴访问器 line.interpolate - 设置或获取插值模式. line.tension - 获取或设置曲线张力访问器(cardinal spline tension). line.defined - 定义线条在某一点是否存在. d3.svg.line.radial - 创建辐射线生成器. line - 生成分段的线性曲线,用于纬度线/雷达线图表. line.radius - 获取或设置radius访问器. line.angle - 获取或设置angle访问器. line.defined - 设置或获取线条定义存取器. d3.svg.area - 创建一个新的区域生成器. area - 生成一个线性的区域,用于区域图表. area.x - 获取或设置x坐标的访问器. area.x0 - 获取或设置x0坐标(基线)的访问器. area.x1 - 获取或设置x1坐标(背线)的访问器. area.y - 获取或设置y坐标的访问器. area.y0 - 获取或设置y0坐标(基线)的访问器. area.y1 - 获取或设置y1坐标(背线)的访问器. area.interpolate - 获取或设置插值模式. area.tension - 获取或设置张力访问器(the cardinal spline tension). area.defined - 判断获取或定义区域定义存取器. d3.svg.area.radial - 创建新的区域生成器. area - 生成分段的线性区域,用于纬度/雷达图表. area.radius - 获取或设置radius访问器. area.innerRadius - 获取或设置内部的radius(基线)访问器. area.outerRadius - 获取或设置外部的radius(背线)访问器. area.angle - 获取或设置angle访问器. area.startAngle - 获取或设置内部的angle(基线)访问器. area.endAngle - 获取或设置外部的angle(背线)访问器. area.defined - 判断获取或定义区域定义存取器. d3.svg.arc - 创建弧度生成器. arc - 生成一个线性弧度,用于饼图或甜甜圈图. arc.innerRadius - 获取或设置内部的半径访问器. arc.outerRadius - 获取或设置外部的半径访问器. arc.startAngle - 获取或设置起始角度访问器. arc.endAngle - 获取或设置结束角度访问器. arc.centroid - 计算弧的重心点. d3.svg.symbol - 创建符号生成器. symbol - 生成指定的符号,用于散列图. symbol.type - 获取或设置符号类型访问器. symbol.size - 获取或设置符号尺寸(in square pixels) 访问器. d3.svg.symbolTypes - 被支持的符号类型数组. d3.svg.chord - 创建新的弦生成器. chord - 生成一个二次贝塞尔曲线连接两个弧, 用于弦图. chord.radius - 获取或设置弧半径访问器. chord.startAngle - 获取或设置弧起始角度访问器. chord.endAngle - 获取或设置弧结束角度访问器. chord.source - 获取或设置源弧度访问器. chord.target - 获取或设置目标弧度访问器. d3.svg.diagonal - 创建新的斜线生成器. diagonal - 生成一个二维贝塞尔连接器, 用于节点连接图. diagonal.source - 获取或设置源点访问器. diagonal.target - 获取或设置目标点访问器. diagonal.projection - 获取或设置一个可选的点变换器. d3.svg.diagonal.radial - 创建一个新的斜线生成器. diagonal - 创建一个二维贝塞尔连接器,用于节点连接图.

    坐标轴(Axes)

    d3.svg.axis - 创建一个axis生成器。 axis - 正式在页面中生成axis。 axis.scale - get或set坐标轴的scale尺度变换,该尺度变换设定了数值和像素位置的转换规则。 axis.orient - get或set坐标轴刻度方向。 axis.ticks - 控制坐标轴刻度的产生方式。 axis.tickValues - 设置特定的坐标轴的值。 axis.tickSize - 指定坐标轴上刻度线的像素长度。 axis.innerTickSize - get或set坐标轴小刻度线的像素长度。 axis.outerTickSize - get或set坐标轴大刻度线的像素长度。 axis.tickPadding - 指定坐标轴刻度和刻度文字之间的像素距离。 axis.tickFormat - 设置刻度文字的格式。

    Controls

    d3.svg.brush - 点击拖拽选择一个二维区域。 brush - 在页面中某个区域中正式绑定一个brush。 brush.x - get或set brush的x变换,用于水平方向的拖拽。 brush.y - get或set brush的y变换,用于垂直方向的拖拽。 brush.extent - get或set brush的选取范围(extent)。 brush.clear - 设置brush的选取范围(extent)为空。 brush.empty - 判断brush的选取范围(extent)是否为空。 brush.on - get或set brush的事件监听器。可监听3种事件:brushstart, brush, brushend。 brush.event - 通过程序触发监听事件,在通过程序设置extent后使用。

    d3.time (Time)

    时间格式转换(Time Formatting)

    d3.time.format - 创建基于某种时间格式的本地时间格式转换器。 format - 将一个date对象转换成特定时间格式的字符串。 format.parse - 将特定时间格式的字符串转换成date对象。 d3.time.format.utc - 创建基于某种时间格式的世界标准时间(UTC)格式转换器。 d3.time.format.iso - 创建基于某种时间格式的ISO世界标准时间(ISO 8601 UTC)格式转换器。

    时间变换(Time Scales)

    d3.time.scale - 创建一个线性时间变换,定义域为数值区间,值域为时间区间。常用于时间坐标轴的创建。详情可参考d3.scale.linear。 scale - 输入为一个数值,返回为一个时间。 scale.invert - 反变换,输入时间返回数值。 scale.domain - get或set变换的定义域。 scale.nice - 扩展定义域范围使定义域更规整。 scale.range - get或set变换的值域。 scale.rangeRound - 设置值域,并对结果取整。 scale.interpolate - get或set变换的插值函数,如将默认的线性插值函数替换成指数插值函数。 scale.clamp - 设置值域是否闭合,默认不闭合。当值域闭合时,假如插值结果在值域之外,会取值域的边界值。详情参考linear.clamp。 scale.ticks - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。 scale.tickFormat - 获取格式转化函数,通常用于坐标轴刻度的格式转化。 scale.copy - 从已有的时间变换中复制出一个变换。

    Time Intervals

    d3.time.interval - 返回一个对于本地时间时间间隔器. interval - 效果同interval.floor方法. interval.range - 返回指定区间内日期. interval.floor - 下舍入到最近的间隔值. interval.round - 上舍入或下舍入到最近的间隔值. interval.ceil - 上舍入到最近的间隔值. interval.offset - 返回指定时间间隔的日期偏移量. interval.utc - 返回对应的UTC时间间隔. d3.time.day - 返回指定时间基于天起始的时间(默认起始是12:00am). d3.time.days - 返回指定时间区间和间隔条件的基于天的所有时间,效果同day.range. d3.time.dayOfYear - 计算指定时间在年中的天数. d3.time.hour - 返回指定时间基于小时起始的时间(e.g., 1:00 AM). d3.time.hours - 返回指定时间区间和间隔条件的基于小时的所有时间, 效果同hour.range. d3.time.minute - 返回指定时间基于分钟起始的时间 (e.g., 1:02 AM). d3.time.minutes - 返回指定时间区间和间隔条件的基于分钟的所有时间,效果同minute.range. d3.time.month - 返回指定时间基于月起始的时间(e.g., February 1, 12:00 AM). d3.time.months - 返回指定时间区间和间隔条件的基于月的所有时间,效果同month.range. d3.time.second - 返回指定时间基于秒起始的时间(e.g., 1:02:03 AM). d3.time.seconds - 返回指定时间区间和间隔条件的基于秒的所有时间,效果同second.range. d3.time.sunday - 返回指定时间基于Sunday起始的时间(e.g., February 5, 12:00 AM). d3.time.sundays - 返回指定时间区间和间隔条件的基于sunday的所有时间, 效果同sunday.range. d3.time.sundayOfYear - 计算以sunday为基点的指定时间在一年中的周数. d3.time.monday - every Monday (e.g., February 5, 12:00 AM). d3.time.mondays - alias for monday.range. d3.time.mondayOfYear - computes the monday-based week number. d3.time.tuesday - every Tuesday (e.g., February 5, 12:00 AM). d3.time.tuesdays - alias for tuesday.range. d3.time.tuesdayOfYear - computes the tuesday-based week number. d3.time.wednesday - every Wednesday (e.g., February 5, 12:00 AM). d3.time.wednesdays - alias for wednesday.range. d3.time.wednesdayOfYear - computes the wednesday-based week number. d3.time.thursday - every Thursday (e.g., February 5, 12:00 AM). d3.time.thursdays - alias for thursday.range. d3.time.thursdayOfYear - computes the thursday-based week number. d3.time.friday - every Friday (e.g., February 5, 12:00 AM). d3.time.fridays - alias for friday.range. d3.time.fridayOfYear - computes the friday-based week number. d3.time.saturday - every Saturday (e.g., February 5, 12:00 AM). d3.time.saturdays - alias for saturday.range. d3.time.saturdayOfYear - computes the saturday-based week number. d3.time.week - alias for sunday. d3.time.weeks - alias for sunday.range. d3.time.weekOfYear - alias for sundayOfYear. d3.time.year - 返回指定时间基于年起始的时间(e.g., January 1, 12:00 AM). d3.time.years - 返回指定时间区间和间隔条件的所有时间,效果同year.range.

    构图(d3.layout)

    Bundle

    d3.layout.bundle - construct a new default bundle layout. bundle - apply Holten’s hierarchical bundling algorithm to edges.

    弦图(Chord)

    d3.layout.chord - 初始化一个弦图对象, 返回一个 Chord 实例 chord.matrix - 设置或者获取弦图实例对应的矩阵数据 chord.padding - 设置或获取弦图各段圆弧之间的间隔角度 chord.sortGroups - 设置或获取矩阵分组的排序函数 chord.sortSubgroups - 设置或获取矩阵二级分组的排序函数 chord.sortChords - 设置或获取弦图在z序上的排序函数(决定哪一组显示在最上层) chord.chords - 该函数会将参数处理成对 chord 更友好的格式并返回, 若没有提供参数, 会调用matrix()来获取数据 chord.groups - 该函数参数处理成更易于理解的分组信息, 若没有提供参数, 会调用matrix()来获取数据

    集群(Cluster)

    d3.layout.cluster - 用默认设置生成一个集群布局对象. cluster.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序. cluster.children - 获取或设置子结点的访问器. cluster.nodes - 计算并返回指定结点的子结点在集群中的信息(坐标,深度等). cluster.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息. cluster.separation - 获取或设置相邻结点间的间隔(不仅限于兄弟结点). cluster.size - 获取或设置布局的 宽 和 高 的大小. cluster.nodeSize - 为结点指定大小.

    力学(Force)

    d3.layout.force -节点(node)基于物理模拟的位置连接。 force.on - 监听布局位置的变化。(仅支持”start”,”step”,”end”三种事件) force.nodes - 获得或设置布局中的节点(node)阵列组。 force.links - 获得或设置布局中节点间的连接(Link)阵列组。. force.size - 获取或设置布局的 宽 和 高 的大小. force.linkDistance - 获取或设置节点间的连接线距离. force.linkStrength - 获取或设置节点间的连接强度. force.friction - 获取或设置摩擦系数. force.charge - 获取或设置节点的电荷数.(电荷数决定结点是互相排斥还是吸引) force.gravity - 获取或设置节点的引力强度. force.theta - 获取或设置电荷间互相作用的强度. force.start - 开启或恢复结点间的位置影响. force.resume - 设置冷却系数为0.1,并重新调用start()函数. force.stop - 立刻终止结点间的位置影响.(等同于将冷却系数设置为0) force.alpha - 获取或设置布局的冷却系数.(冷却系数为0时,节点间不再互相影响) force.tick - 让布局运行到下一步. force.drag - 获取当前布局的拖拽对象实例以便进一步绑定处理函数.

    层级布局(Hierarchy)

    d3.layout.hierarchy - 获得一个自定义的层级布局的实现. hierarchy.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序. hierarchy.children - 获取或设置子结点的访问器. hierarchy.nodes - 计算并返回指定结点的子结点信息. hierarchy.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息. hierarchy.value - 获取或设置结点的值访问器. hierarchy.revalue - 重新计算层级布局.

    直方图(Histogram)

    d3.layout.histogram - 构建一个默认直方图(用来表示一组离散数字的分布,横轴表示区间,纵轴表示区间内样本数量或样本百分比). histogram.value - 获取或设置值访问器. histogram.range - 获取或设置合法值范围. histogram.bins - 指定如何将数据分组到不同的区间(bin)里, 返回一个构造函数 . histogram - 根据已设置的区间将数据分组,返回已分组的二维数组(compute the distribution of data using quantized bins). histogram.frequency - 设置直方图Y轴值是区间内数据的总量还是百分比(compute the distribution as counts or probabilities).

    层包(Pack)

    d3.layout.pack - 用递归的圆环表现一个多层级布局. pack.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序. pack.children - 获取或设置子结点的访问器. pack.nodes - 计算并返回指定结点的子结点信息. pack.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息. pack.value - 获取或设置一个函数, 用来计算圆环的大小(近似值). pack.size - 设置整个布局画布的 宽 and 高. pack.radius - 假如不想结点半径与结点的值相同, 可以传入一个函数用来计算结点半径. pack.padding - 指定相邻结点之点的间距(近似值).

    分区(Partition)

    d3.layout.partition - 将一棵树递归的分区. partition.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序. partition.children - 获取或设置子结点的访问器. partition.nodes - 计算并返回指定结点的子结点信息. partition.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息. partition.value - 设置一个函数来来计算分区的值. partition.size - 设置整个布局画布的 宽 and 高.

    饼图(Pie)

    d3.layout.pie - 构建一个默认的饼图. pie - 该函数将传入的原始参数转换成可用于饼图或者环形图的数据结构. pie.value - 获取或设置值访问器. pie.sort - 设置饼图顺时针方向的排序方法. pie.startAngle - 设置或获取整个饼图的起始角度. pie.endAngle - 设置或获取整个饼图的终止角度.

    堆叠图(Stack)

    d3.layout.stack - 构建一个默认的堆叠图(用来展示一系列x轴相同的面积图或者立方图). stack - 计算每一层的基线. stack.values - 设置或者获取每层的值访问器. stack.order - 设置每层的排序. stack.offset - 指定总的基线算法. stack.x - 设置或获取每层的x轴访问器. stack.y - 设置或获取每层的y轴访问器. stack.out - 设置或获取用来储存基线的输出函数.

    树(Tree)

    d3.layout.tree - position a tree of nodes tidily. tree.sort - 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序. tree.children - 设置或获取子结点的访问器. tree.nodes - 计算并返回指定结点的子结点信息. tree.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息. tree.separation - 设置或获取相隔结点之间的间隔计算函数. tree.size - 指定整个布局的宽和高. tree.nodeSize - 给全部结点指定一个固定的大小(会导致tree.size失效).

    矩阵树(Treemap)

    d3.layout.treemap - 返回一个矩阵树对象(用矩阵来展示一颗树). treemap.sort - 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序. treemap.children - 设置或获取子结点的访问器. treemap.nodes - 计算并返回指定结点的子结点信息. treemap.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息. treemap.value - 设置或获取一个用来计算单元格大小的值访问器. treemap.size - 指定整个布局的宽和高. treemap.padding - 指定父结点和子结点的间距. treemap.round - 禁用或启用边界补偿. treemap.sticky - 让布局更”粘”以保证在更新数据时有平滑的动画效果. treemap.mode - 更改矩阵树的布局算法.

    d3.geo (Geography)

    Paths

    d3.geo.path - 创建一个新的地理路径生成器. path - 投射指定的特性并且渲染到上下文. path.projection - 获取活设置地理投影. path.context - 获取活设置渲染上下文. path.pointRadius -获取或设置半径去现实点的特性. path.area - 计算指定特性的投射区域. path.centroid - 计算指定特性的投射重心点. path.bounds - 计算指定特性的投射边界. d3.geo.graticule - 创建地理坐标网生成器. graticule - 生产一个子午线或平行线的MultiLineStrings. graticule.lines - 生成一个子午线和平行线的LineString的数组. graticule.outline - 生成一个表示该坐标网的外框多边形. graticule.extent - 获取或设置主要的和次要的范围. graticule.majorExtent - 获取或设置主要范围. graticule.minorExtent - 获取或设置次要范围. graticule.step - 获取或设置主要和次要的步间隔. graticule.majorStep - 获取或设置主要的步间隔. graticule.minorStep - 获取或设置次要的步间隔. graticule.precision - 设置或者获取横向精度. d3.geo.circle - 创建一个圆形的生成器. circle - 使用多边形来生成一个分段的圆形. circle.origin - 通过横向和纵向坐标来指定原点. circle.angle - 指定以度为单位的角半径. circle.precision - 指定分段圆的精度. d3.geo.area - 根据给定特征计算球面面积. d3.geo.bounds - compute the latitude-longitude bounding box for a given feature. d3.geo.centroid - compute the spherical centroid of a given feature. d3.geo.distance - compute the great-arc distance between two points. d3.geo.interpolate - interpolate between two points along a great arc. d3.geo.length - compute the length of a line string or the circumference of a polygon. d3.geo.rotation - create a rotation function for the specified angles [λ, φ, γ]. rotation - rotate the given location around the sphere. rotation.invert - inverse-rotate the given location around the sphere.

    Projections

    d3.geo.projection - create a standard projection from a raw projection. projection - project the specified location. projection.invert - invert the projection for the specified point. projection.rotate - get or set the projection’s three-axis rotation. projection.center - get or set the projection’s center location. projection.translate - get or set the projection’s translation position. projection.scale - get or set the projection’s scale factor. projection.clipAngle - get or set the radius of the projection’s clip circle. projection.clipExtent - get or set the projection’s viewport clip extent, in pixels. projection.precision - get or set the precision threshold for adaptive resampling. projection.stream - wrap the specified stream listener, projecting input geometry. d3.geo.projectionMutator - create a standard projection from a mutable raw projection. d3.geo.albers - the Albers equal-area conic projection. albers.parallels - get or set the projection’s two standard parallels. d3.geo.albersUsa - a composite Albers projection for the United States. d3.geo.azimuthalEqualArea - the azimuthal equal-area projection. d3.geo.azimuthalEquidistant - the azimuthal equidistant projection. d3.geo.conicConformal - the conic conformal projection. d3.geo.conicEquidistant - the conic equidistant projection. d3.geo.conicEqualArea the conic equal-area (a.k.a. Albers) projection. d3.geo.equirectangular - the equirectangular (plate carreé) projection. d3.geo.gnomonic - the gnomonic projection. d3.geo.mercator - the spherical Mercator projection. d3.geo.orthographic - the azimuthal orthographic projection. d3.geo.stereographic - the azimuthal stereographic projection. d3.geo.azimuthalEqualArea.raw - the raw azimuthal equal-area projection. d3.geo.azimuthalEquidistant.raw - the azimuthal equidistant projection. d3.geo.conicConformal.raw - the raw conic conformal projection. d3.geo.conicEquidistant.raw - the raw conic equidistant projection. d3.geo.conicEqualArea.raw the raw conic equal-area (a.k.a. Albers) projection. d3.geo.equirectangular.raw - the raw equirectangular (plate carrée) projection. d3.geo.gnomonic.raw - the raw gnomonic projection. d3.geo.mercator.raw - the raw Mercator projection. d3.geo.orthographic.raw - the raw azimuthal orthographic projection. d3.geo.stereographic.raw - the raw azimuthal stereographic projection. d3.geo.transverseMercator.raw - the raw transverse Mercator projection.

    Streams

    d3.geo.stream - convert a GeoJSON object to a geometry stream. stream.point - indicate an x, y (and optionally z) coordinate. stream.lineStart - indicate the start of a line or ring. stream.lineEnd - indicate the end of a line or ring. stream.polygonStart - indicate the start of a polygon. stream.polygonEnd - indicate the end of a polygon. stream.sphere - indicate a sphere. d3.geo.transform - transform streaming geometries. transform.stream - wraps a given stream. d3.geo.clipExtent - a stream transform that clips geometries to a given axis-aligned rectangle. clipExtent.extent - sets the clip extent.

    d3.geom (Geometry)

    Voronoi

    d3.geom.voronoi - create a Voronoi layout with default accessors. voronoi - compute the Voronoi tessellation for the specified points. voronoi.x - get or set the x-coordinate accessor for each point. voronoi.y - get or set the y-coordinate accessor for each point. voronoi.clipExent - get or set the clip extent for the tesselation. voronoi.links - compute the Delaunay mesh as a network of links. voronoi.triangles - compute the Delaunay mesh as a triangular tessellation.

    Quadtree

    d3.geom.quadtree - constructs a quadtree for an array of points. quadtree.add - add a point to the quadtree. quadtree.visit - recursively visit nodes in the quadtree.

    Polygon

    d3.geom.polygon - create a polygon from the specified array of points. polygon.area - compute the counterclockwise area of this polygon. polygon.centroid - compute the area centroid of this polygon. polygon.clip - clip the specified polygon to this polygon.

    Hull

    d3.geom.hull - create a convex hull layout with default accessors. hull - compute the convex hull for the given array of points. hull.x - get or set the x-coordinate accessor. hull.y - get or set the y-coordinate accessor.

    d3.behavior (Behaviors)

    Drag

    d3.behavior.drag drag.origin drag.on

    缩放 Zoom

    d3.behavior.zoom - 创建一个缩放行为. zoom - 对指定元素应用缩放. zoom.scale - the current scale factor. zoom.translate - the current translate offset. zoom.scaleExtent - optional limits on the scale factor. zoom.center - an optional focal point for mousewheel zooming. zoom.size - the dimensions of the viewport. zoom.x - an optional scale whose domain is bound to the x extent of the viewport. zoom.y - an optional scale whose domain is bound to the y extent of the viewport. zoom.on - listeners for when the scale or translate changes. zoom.event - dispatch zoom events after setting the scale or translate.
    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    正版 Windows 11产品密钥怎么查找/查看?

    还有3个月,微软将停止 Windows 10 的更新

    Windows 10 终止支持后,企业为何要立即升级?

    Windows 10 将于 2025年10 月终止技术支持,建议迁移到 Windows 11

    Windows 12 发布推迟,微软正全力筹备Windows 11 25H2更新

    Linux 退出 mail的命令是什么

    Linux 提醒 No space left on device,但我的空间看起来还有不少空余呢

    hiberfil.sys文件可以删除吗?了解该文件并手把手教你删除C盘的hiberfil.sys文件

    Window 10和 Windows 11哪个好?答案是:看你自己的需求

    盗版软件成公司里的“隐形炸弹”?老板们的“法务噩梦” 有救了!

    IT头条

    公安部:我国在售汽车搭载的“智驾”系统都不具备“自动驾驶”功能

    02:03

    液冷服务器概念股走强,博汇、润泽等液冷概念股票大涨

    01:17

    亚太地区的 AI 驱动型医疗保健:2025 年及以后的下一步是什么?

    16:30

    智能手机市场风云:iPhone领跑销量榜,华为缺席引争议

    15:43

    大数据算法和“老师傅”经验叠加 智慧化收储粮食尽显“科技范”

    15:17

    技术热点

    商业智能成CIO优先关注点 技术落地方显成效(1)

    用linux安装MySQL时产生问题破解

    JAVA中关于Map的九大问题

    windows 7旗舰版无法使用远程登录如何开启telnet服务

    Android View 事件分发机制详解

    MySQL用户变量的用法

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。