&&&&D3.JS 基于javascript的图表展示库&五&-基本柱状图1
&D3.JS 基于javascript的图表展示库&五&-基本柱状图1
D3.JS 基于javascript的图表展示库&五&-基本柱状图1
博客地址http://blog.csdn.net/a6383277/article/details/8762638
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
D3.JS 基于javascript的图表展示库&五&-基本柱状图1
所需积分：0
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
D3.JS 基于javascript的图表展示库&五&-基本柱状图1
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员这一次我们继续完成带缩略图拖拽查看的面积图。我们要完成的是拖拽查看的部分。面积图强调数量随时间而变化的程度，是非常常用的可视化图表最终demo &/demo/brush.html 在开始学习时建议大家先熟悉下图表的交互方式&效果图：&要制作拖拽缩略查看的效果，我们首先要了解d3js的brush对象。可以把这个叫做拖拽刷子/mbostock/d3/wiki/SVG-Controls#wiki-brush&#&d3.svg.brush()要使用brush对象的时候，必须先用这个来创建一个brush对象。#&brush.x([scale])这个方法可以“设置”你所要拖拽的总范围。注意传入的是scale，也就是说类似&x2&=&d3.time.scale().range([0,&width])这样的scale对象，一般就是你用来代表某个坐标轴数据的那个对象。brush.y方法同理。#&brush.extent([values])在我们使用拖拽刷子时都有个刷到的范围，extend方法可以获得或者设置这个范围。若我们在之前设置了x(),那extend会返回一个[x0,x1]这样的范围。若同时设置了x,y会返回一个二维数组范围。注意extend里面也是个scale，所以可以用domain匹配数据，这样就可以方便我们改变图表了。domain方法#&brush.on(type[,&listener])这个方法主要是来做事件监听brushstart – 鼠标按下刷子时的事件brush – 鼠标“刷”的时候，extend变化的事件brushend – 鼠标抬起的事件为了方便大家理解，我画了个图，大家对照着看就明白了。ok，有了以上的工具，我们要理清制作的思路：brush图表的原理是利用上下两个图表，两个图表x方向的数据一样则图表就一样。当刷动图表时，根据brush对象拿到第二个图表刷到的区域范围。利用这个范围去匹配第一个图表，然后更新第一个图表即可首先创造brush对象，并绑定要“刷”的那个坐标轴给下面的图表预留出“刷”的部分。激活区域给上面的图表预留出“刷”后的结果显示区监听“刷”的事件，当刷的范围改变时，更新上面的图表。&第一步建立brush对象绑定好坐标轴var&x&=&d3.time.scale().range([0,&width]),
&&&&x2&=&d3.time.scale().range([0,&width]),
&&&&y&=&d3.scale.linear().range([height,&0]),
&&&&y2&=&d3.scale.linear().range([height2,&0]);
//建立brush对象
var&brush&=&d3.svg.brush()
&&&&.x(x2)因为我们是在下面的图表刷的，所以要绑定下面&第二步，在下面的图表中预留出刷的部分，并激活context.append(&g&)
&&&&&&.attr(&class&,&&x&brush&)
&&&&&&.call(brush)//绑定刷子
&&&&.selectAll(&rect&)
&&&&&&.attr(&y&,&-6)
&&&&&&.attr(&height&,&height2&+&7);
});这里使用call方法，可以把区域与刷子对象绑定好第三步，给上面的图表绑定一个刷后结果区svg.append(&defs&).append(&clipPath&)
&&&&.attr(&id&,&&clip&)
&&.append(&rect&)
&&&&.attr(&width&,&width)
&&&&.attr(&height&,&height);我们这里使用了svg的clippath。简单讲解一下（引用自/article-68087-1.html）对象的裁剪路径 – clipPath元素&&&&& 裁剪路径使用clipPath元素定义，然后使用clip-path属性引用。clipPath可以包含path元素，text元素，基本的图形元素(circle等)和use元素。如果是use元素，则它必须是直接引用path,text或者基本图形元素，不能引用的是其他的元素。注意裁剪路径只是一位的遮罩层，该路径是包含的所有的元素的并集。在这个集合中的对象就可以显示，不在这个范围内的对象就不显示。具体判定点在不在范围内的算法由”clip-rule”属性指定。对于图形对象，裁剪路径等于自己clip-path设置的裁剪路径与所有外层元素的裁剪路径(包括clip-path和overflow设置的裁剪路径)的并集。注意几点：1.clipPath元素自身并不会从外层节点继承clipPath定义的裁剪路径。2.clipPath元素自身可以设置clip-path属性。效果是两个路径的交集。3.clipPath元素的子元素可以设置clip-path属性：效果是两个路径的并集。4.空裁剪路径会裁掉元素内所有的内容。下面看看几种重要的属性：clipPathUnits = “userSpaceOnUse(默认值) | objectBoundingBox”&&&&& 这个属性定义了clipPath元素使用的坐标系统，这两个值我们都很熟悉了，分别是采用引用当前裁剪路径的元素的用户坐标系统和包围盒比例值。clipPath元素从来不直接渲染，都是通过clip-path被引用，所以设置clipPath元素的display属性没有作用。clip-path = “&url(#裁剪路径名)&&| none inherit”&&&&& 这个属性不用多说了，用于引用裁剪路径，这里需要注意的是，所有的容器元素，基本图形元素和clipPath元素都可以使用这个属性。clip-rule = “nonzero(默认值) | evenodd | inherit”&&&&& 这个属性用于确定哪些点是属于裁剪路劲内部的点。对于简单的封闭图形，这个很好判定，但是对于复杂的内部有洞的图形，就有区别了。这个属性的取值与fill-rule的取值含义是一样的：nonzero：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；计算结果从0开始，每有一个交点处的线段是从左到右的，就加1；每有一个交点处的线段是从右到左的，就减1；这样计算完所有交点后，如果这个计算的结果不等于0，则该点在图形内，需要填充；如果该值等于0，则在图形外，不需要填充。看下面的示例：evenodd：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数，个数为奇数则改点在图形内，需要填充；个数为偶数则点在图形外，不需要填充。看下图的示例：clip-rule属性只能用于clipPath元素的内部图形元素。例如下面的设置是起作用的：&g&
&&&clipPath&id=&MyClip&&
&&&&&path&d=&...&&clip-rule=&evenodd&&/&
&&clipPath&
&&&rect&clip-path=&url(#MyClip)&&...&/&
g&如果元素不在clipPath中是不起作用的。例如下面的设置是不起作用的：&g&clip-rule=&nonzero&&
&&&clipPath&id=&MyClip&&
&&&&&path&d=&...&&/&
&&clipPath&
&&&rect&clip-path=&url(#MyClip)&&clip-rule=&evenodd&&...&/&
g&最后看裁剪路径的一个小例子：&svg&width=&100px&&height=&100px&&
&&&&&clipPath&id=&MyClip&&
&&&&&&&path&d=&M&10,10&L&10,20&L&20,20&L&20,10&Z&&clip-rule=&evenodd&&/&
&&&&&clipPath&
&&&rect&clip-path=&url(#MyClip)&&x=&10&&y=&10&&width=&80&&height=&80&&fill=&Red&&/&
&svg&矩形只有左上角10*10的区域是可见的。那么回到我们的图表。我们创建了一个clip-path后，还需要用url来引用他，因此我们修改以前的图表focus.append(&path&)
&&&&&&.datum(data)
&&&&&&.attr(&clip-path&,&&url(#clip)&)//在这里增加一个裁剪层
&&&&&&.attr(&d&,&area);第四步，做事件绑定。var&brush&=&d3.svg.brush()
&&&&.x(x2)
&&&&.on(&brush&,&brushed);//链式操作接到前面创建的brush对象后面即可当brush的extend范围变动时，触发brushed函数。brushed函数内容如下function&brushed()&{
&&x.domain(brush.empty()&?&x2.domain()&:&brush.extent());//利用domain方法绑定数据。domain方法的讲解可以参考第一篇教程
//这里是一个三元操作符。当brush.empty(选定为空)时，x与x2的数值范围是一样的，当有brush时，x绑定brush对象刷到的区域所代表的数据范围。
&&focus.select(&path&).attr(&d&,&area);&//利用新的数据更新上面图表
&&focus.select(&.x.axis&).call(xAxis);//这里注意，上面图表的数据范围已经变化了，但坐标轴没变化，我们利用call方法来重新绑定一下
-----------------------------------------------------
转载请注明来源此处
微网聚博客乐园 (C)2014 blog.mn886.net 鲁ICP备号&&用d3.js或jfreechart在web上做图表，哪个比较好，他们的区别在哪，哪个国内用的比较多？
按投票排序
都行吧，哪个顺手用哪个~d3 效果很炫，但是因为太炫了容易忽略了展示数据的本意。jfreechart 个人觉得不太好看~推荐两个简单易用效果好的：轻量级的 Chart.js百度的 ECharts
只是想要excel等级的chart的话 别用d3 那个是给你从底层开始弄酷炫拽的。我也写过几个相当花哨的d3，但是对于图表，实在是没心情重新造轮子。对应的有基于d3二次开发的c3和nvd3等。个人偏向于c3的美术风格。chartjs也不错，ECharts看介绍很牛逼，不过试了下老出错没时间细查就放弃了，另外风格略怀旧。
d3.js比较底层，画起来特别累，不过你可以试试dimple.js等以d3为基础的语言，人生苦短(? o?_o?)?
已有帐号？
无法登录？
社交帐号登录JavaScript可视化图表库D3.js API中文参考
投稿：junjie
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JavaScript可视化图表库D3.js API中文参考,本文对常用的API给出一中文翻译,需要的朋友可以参考下
库所提供的所有 API 都在 d3 命名空间下。d3 库使用语义版本命名法（semantic versioning）。 你可以用 d3.version 查看当前的版本信息。
d3 (核心部分)
- 从当前文档中选择一系列元素。
- 从当前文档中选择多项元素。
- 设置或获取指定属性。
- 添加或删除选定元素的 CSS 类（CSS class）。
- 设置或删除 CSS 属性。style优先级高于attr。
- 设置或获原生的属性值（raw property）。
- 设置或获取选定元素的标签体文本内容。
- 设置或获取选定元素的 HTML 内容（类似 innerHTML ）
- 创建并添加新元素到选定元素后。
- 创建并添加新元素到选定元素前。
- 从当前文档对象中删除选定的元素。
- 设置或获取一组元素的绑定数据（get or set data for a group of elements, while computing a relational join.）
- 返回缺失元素的占位对象（placeholder），指向绑定的数据中比选定元素集多出的一部分元素。
- 返回多余元素的元素集，即选择元素中比绑定数据多出的一部分。(关于data, enter, exit原理的, , )
- 设置或获取单独元素的数据，不进行关联。（get or set data for individual elements, without computing a join.）
- 根据绑定的数据过滤选择集。
- 根据绑定的数据对选择的元素进行排序。
- 对文档中的元素重排序以匹配选择集。
- 添加或删除事件监听器。
- 启动一个过渡效果（返回 Transition 对象），可以理解为动画。
- 立即停止所有正在进行的动画动作。
- 为每个选择的元素集调用指定的函数。
- 为当前选择的元素集调用指定的函数。
- 测试选择集是否为空。
- 返回选择集中的第一个元素。
- 返回选择集中的元素个数。
- 选择所选的元素中的第一个子元素组成新的选择集。
- 选择所选的元素中的多个子元素组成新的选择集。
- 选择集对象原型（可通过 d3.selection.prototype 为选择集增强功能）。
- 获取当前交互的用户事件。
- 获取鼠标的相对某元素的坐标。
- 获取相对某元素的触控点坐标。
- 开始一个动画过渡。
- 指定每个元素过渡的延迟时间（单位：毫秒ms）。
- 指定每个元素过渡的持续时间（单位：毫秒ms）。
- 指定过渡的缓冲函数。
- 平滑过渡到新的attr属性值（起始属性值为当前属性）。
- 在不同attr属性值之间平滑过渡（起始属性值可在过渡函数中设置,甚至整个过渡函数都可以自定义）。
- 平滑过渡到新的style属性值。
- 在不同style属性值之间平滑过渡。
- 在过渡开始时设置文本内容。
- 使某个属性过渡到一个新的属性值，该属性可以是非attr或非style属性，比如text。
- 选择每个当前元素的某个子元素进行过渡。
- 选择每个当前元素的多个子元素进行过渡。
- 通过数据筛选出当前元素中的部分元素进行过渡。
- 当前过渡结束后开始新的过渡。
- 过渡结束后移除当前元素。
- 如果过渡为空就返回true。如果当前元素中没有非null元素，则此过渡为空。
- 返回过渡中的第一个元素。
- 返回过渡中当前元素的数量。
- 遍历每个元素执行操作。不指定触发类型时，立即执行操作。当指定触发类型为'start'或'end'时,会在过渡开始或结束时执行操作。
- 以当前过渡为this执行某个函数。
- 定制过渡的缓冲函数。
- 缓冲函数。缓冲函数可让动画效果更自然，比如elastic缓冲函数可用以模拟弹性物体的运动。是一种插值函数的特例。
- 开始一个定制的动画计时。功能类似于setTimeout，但内部用requestAnimationFrame实现，更高效。
- 立刻执行当前没有延迟的计时。可用于处理闪屏问题。
- 生成一个插值函数，在两个参数间插值。差值函数的类型会根据输入参数的类型（数字、字符串、颜色等）而自动选择。
- 插值函数。输入参数在[0, 1]之间。
- 在两个数字间插值。
- 在两个数字间插值，返回值会四舍五入取整。
- 在两个字符串间插值。解析字符串中的数字，对应的数字会插值。
- 在两个RGB颜色间插值。
- 在两个HSL颜色间插值。
- 在两个L*a*b*颜色间插值。
- 在两个HCL颜色间插值。
- 在两个数列间插值。d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // returns [0.5, 5.5, 100]
- 在两个object间插值。d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10, z: 100} )(0.5); // returns {x: 0.5, y: 5.5, z: 100}
- 在两个2D仿射变换间插值。
- 在两个点之间平滑地缩放平移。
- 添加一个自定义的插值函数.
数据操作(Working with Arrays)
- 升序排序函数.
- 降序排序函数.
- 获取数组中的最小值.
- 获取数组中的最大值.
- 获取数组的范围(最小值和最大值).
- 获取数组中数字之和.
-获取数组中数字的算术平均值.
- 获取数组中数字的中位数 (相当于 0.5-quantile的值).
- 获取排好序的数组的一个分位数(quantile).
- 通过二分法获取某个数在排好序的数组中的插入位置(同d3.bisectRight).
- 获取某个数在排好序的数组中的插入位置(相等的值归入右边).
- 获取某个数在排好序的数组中的插入位置(相等的值归入左边).
- 自定义一个二分函数.
- 洗牌，随机排列数组中的元素.
- 以指定顺序排列数组中的元素.
- 将多个数组合并成一个数组的数组，新数组的的第i个元素是原来各个数组中第i个元素组成的数组.
- 矩阵转置，通过d3.zip实现.
- 返回临近元素对的数组，d3.pairs([1, 2, 3, 4]); // returns [ [1, 2], [2, 3], [3, 4] ].
- 返回关联数组(哈希表、json、object对象)的key组成的数组.
- 返回关联数组的value组成的数组.
- 返回关联数组的key-value实体组成的数组, d3.entries({ foo: 42 }); // returns [{key: "foo", value: 42}].
- 将多个数组连成一个，类似于原生方法concat. d3.merge([ [1], [2, 3] ]); // returns [1, 2, 3].
- 获得一个数列. d3.range([start, ]stop[, step])
- 获得一个nest对象，将数组组织成层级结构. 示例：
- 为nest层级结构增加一个层级.
- 将当前的nest层级结构按key排序.
- 将叶nest层级按value排序.
- 设置修改叶节点值的函数.
- 执行nest操作, 返回一个关联数组(json).
- 执行nest操作, 返回一个key-value数组. 如果nest.map返回的结果类似于{ foo: 42 }, 则nest.entries返回的结果类似于[{key: "foo", value: 42}].
- 将javascript的object转化为hash,屏蔽了object的原型链功能导致的与hash不一致的问题。
- map有某个key就返回true.
- 返回map中某个key对应的value.
- 设置map中某个key对应的value.
- 删除map中的某个key.
- 返回map中所有key组成的数组.
- 返回map中所有value组成的数组.
- 返回map中所有entry（key-value键值对）组成的数组.类似于{ foo: 42 }转化成[{key: "foo", value: 42}]
- 对map中每一个entry执行某个函数.
- 将javascript的array转化为set,屏蔽了array的object原型链功能导致的与set不一致的问题。set中的value是array中每个值转换成字符串的结果。set中的value是去重过的。
- 返回set中是否含有某个value.
- 添加某个value.
- 删除某个value.
- 返回set中的值组成的数组.set中的value是去重过的.
- 对set中每一个value执行某个函数.
- 利用正态分布产生一个随机数.
- 利用对数正态分布产生一个随机数.
- 利用Irwin–Hall分布（简单可行并且容易编程的正态分布实现方法）产生一个随机数.
- 将svg的tranform格式转化为标准的2D转换矩阵字符串格式.
载入外部资源(Loading External Resources)
- 发起XMLHttpRequest请求获取资源。
- 设置 request header。
- 设置 Accept request header，并重写 response MIME type。
- 设置response返回值转化函数。如 function(request) { return JSON.parse(request.responseText); }
- 发起GET请求。
- 发起POST请求。
- 以指定的方法和数据发起请求。
- 终止当前请求。
- 为请求添加”beforesend”, “progress”, “load” 或 “error” 等事件监听器。
- 请求一个text文件。
- 请求一个JSON。
- 请求一个html文本片段。
- 请求一个XML文本片段。
- 请求一个CSV(comma-separated values, 逗号分隔值)文件。
- 请求一个TSV(tab-separated values, tab分隔值)文件。
字符串格式化(String Formatting)
- 将数字转化成指定格式的字符串。转化的格式非常丰富，且非常智能。
- 以指定的值和精度获得一个[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(‘$'); // return “\$”
- 设置某个数按小数点后多少位取整。与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)
- 获取一个CSV (comma-separated values, 冒号分隔值)文件。
- 将CSV文件字符串转化成object的数组，object的key由第一行决定。如： [{"Year": "1997", "Length": "2.34"}, {"Year": "2000", "Length": "2.38"}]
- 将CSV文件字符串转化成数组的数组。如： [ ["Year", "Length"],["1997", "2.34"],["2000", "2.38"] ]
- 将object的数组转化成CSV文件字符串，是d3.csv.parse的逆操作。
- 将数组的数组转化成CSV文件字符串，是d3.csv.parseRows的逆操作。
- 获取一个TSV (tab-separated values, tab分隔值)文件。
- 类似于d3.csv.parse。
- 类似于d3.csv.parseRows。
- 类似于d3.csv.format。
- 类似于d3.csv.formatRows。
- 创建一个类似于d3.csv的文件处理对象，可以自定义分隔符和mime type。如：var dsv = d3.dsv(“|”, “text/plain”);
- 指定一种颜色，创建一个RGB颜色对象。支持多种颜色格式的输入。
- 增强颜色的亮度，变化幅度由参数决定。
- 减弱颜色的亮度，变化幅度由参数决定。
- 将RGB颜色对象转化成HSL颜色对象。
- RGB颜色转化为字符串格式。
- 创建一个HSL颜色对象。支持多种颜色格式的输入。
- 增强颜色的亮度，变化幅度由参数决定。
- 减弱颜色的亮度，变化幅度由参数决定。
- 将HSL颜色对象转化成RGB颜色对象。
- HSL颜色转化为字符串格式。
- 创建一个Lab颜色对象。支持多种颜色格式的输入。
- 增强颜色的亮度，变化幅度由参数决定。
- 减弱颜色的亮度，变化幅度由参数决定。
- 将Lab颜色对象转化成RGB颜色对象。
- Lab颜色转化为字符串格式。
- 创建一个HCL颜色对象。支持多种颜色格式的输入。
- 增强颜色的亮度，变化幅度由参数决定。
- 减弱颜色的亮度，变化幅度由参数决定。
- 将HCL颜色对象转化成RGB颜色对象。
- HCL颜色转化为字符串格式。
- 获取或扩展已知的XML命名空间。
- 验证命名空间前缀是否存在, 如”xlink:href”中xlink是已知的命名空间。
内部方法（Internals）
- 函数化。将非函数变量转化为只返回该变量值的函数。输入函数，则返回原函数；输入值，则返回一个函数，该函数只返回原值。
- 将一个对象的方法绑定到另一个对象上。
- 创建一个定制的事件。
- 添加或移除一个事件监听器。对一个事件可添加多个监听器。
- 触发事件。其中‘type'为要触发的事件的名称。
d3.scale(Scales)
定量变换(Quantitative)
- 创建一个线性定量变换。（建议参考源码以深入理解各种变换。）
- 输入一个定义域的值，返回一个值域的值。
- 反变换，输入值域值返回定义域值。
- get或set定义域。
- get或set值域。
- 设置值域，并对结果取整。
- get或set变换的插值函数，如将默认的线性插值函数替换成取整的线性插值函数d3_interpolateRound。
- 设置值域是否闭合，默认不闭合。当值域闭合时，如果插值结果在值域之外，会取值域的边界值。如值域为[1, 2],插值函数的计算结果为3，如果不闭合，最终结果为3；如果闭合，最终结果为2。
- 扩展定义域范围使定义域更规整。如[0.6] 变成 [0.2, 1]。
- 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
- 获取格式转化函数，通常用于坐标轴刻度的格式转化。如：var x = d3.scale.linear().domain([-1, 1]); console.log(x.ticks(5).map(x.tickFormat(5, “+%”))); // ["-100%", "-50%", "+0%", "+50%", "+100%"]
- 从已有的变换中复制出一个变换。
- 创建一个求平方根的定量转换。
- 创建一个指数变换。（可参考linear对应函数的注释）
- 输入一个定义域的值，返回一个值域的值。
- 反变换，输入值域值返回定义域值。
- get或set定义域。
- get或set值域。
- 设置值域，并对结果取整。
- get或set变换的插值函数。
- 设置值域是否闭合，默认不闭合。
- 扩展定义域范围使定义域更规整。
- 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
- 获取格式转化函数，通常用于坐标轴刻度的格式转化。
- get或set指数的幂次。默认为1次幂。
- 从已有的变换中复制出一个变换。
- 创建一个对数变换。（可参考linear对应函数的注释）
- 输入一个定义域的值，返回一个值域的值。
- 反变换，输入值域值返回定义域值。
- get或set定义域。
- get或set值域。
- 设置值域，并对结果取整。
- get或set变换的插值函数。
- 设置值域是否闭合，默认不闭合。
- 扩展定义域范围使定义域更规整。
- 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
- 获取格式转化函数，通常用于坐标轴刻度的格式转化。
- 从已有的变换中复制出一个变换。
- 创建一个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;
- 返回得到某个离散值的值域范围。 // q.invertExtent(‘a') 的结果为 [0, 0.3333]
- get或set变换的定义域。
- get或set变换的值域。
- 从已有的变换中复制出一个变换。
- 构建一个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]
- 输入数值，返回离散值。
- 输入离散值，返回数值。
- get或set变换的定义域。
- get或set变换的值域。
- 从已有的变换中复制出一个变换。
- 构建一个quantile线性变换。使用方法与quantize完全类似，区别是quantile根据中位数来分隔区间，quantize根据算数平均值来分隔区间。
- 输入数值，返回离散值。
- 输入离散值，返回数值。
- get或set变换的定义域。
- get或set变换的值域。
- 获得quantile变换的分隔值。示例： var q = d3.scale.quantile().domain([0, 1]).range(['a', 'b', 'c']); q.quantiles() returns [0.35]
- 从已有的变换中复制出一个变换。
- 构建一个identity线性变换。特殊的linear线性变换，此变换定义域和值域相同，只在一些d3内部的axis或brush模块中用到。
- identity线性变换函数。返回输入值。
- 和identity函数相同，返回输入值。
- get或set变换的定义域。
- get或set变换的值域。
- 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
- 获取格式转化函数，通常用于坐标轴刻度的格式转化。
- 从已有的变换中复制出一个变换。
序数变换（Ordinal）
- 构建一个ordinal变换对象。ordinal变换的输入定义域和输出值域都是离散的。而quantitative变换的输入定义域是连续的，这是两者最大的不同。
- 输入一个离散值，返回一个离散值。不在当前定义域中的输入值会自动加入定义域。
- get或set变换的定义域。
- get或set变换的值域。
- 用几个离散点来分割一个连续的区间。详情请看链接中的图例。
- 用几个离散区间来分割一个连续的区间。详情请看链接中的图例。
- 用几个离散区间来分割一个连续的区间，区间边界和宽度会取整。详情请看链接中的图例。
- 获取离散区间的宽度。
- 获取输出域的最小最大值。
- 从已有的变换中复制出一个变换。
- 用10种颜色构建一个ordinal变换。
- 用20种颜色构建一个ordinal变换。
- 用另外20种颜色构建一个ordinal变换。
- 用另外20种颜色构建一个ordinal变换。
d3.svg (SVG)
- 创建一个线段生成器.
- 在折线图里生成一段折线.
- 设置或获取x轴访问器.
- 设置或获取y轴访问器
- 设置或获取插值模式.
- 获取或设置曲线张力访问器(cardinal spline tension).
- 定义线条在某一点是否存在.
- 创建辐射线生成器.
- 生成分段的线性曲线，用于纬度线／雷达线图表.
- 获取或设置radius访问器.
- 获取或设置angle访问器.
- 设置或获取线条定义存取器.
- 创建一个新的区域生成器.
- 生成一个线性的区域,用于区域图表.
- 获取或设置x坐标的访问器.
- 获取或设置x0坐标(基线)的访问器.
- 获取或设置x1坐标(背线)的访问器.
- 获取或设置y坐标的访问器.
- 获取或设置y0坐标(基线)的访问器.
- 获取或设置y1坐标(背线)的访问器.
- 获取或设置插值模式.
- 获取或设置张力访问器(the cardinal spline tension).
- 判断获取或定义区域定义存取器.
- 创建新的区域生成器.
- 生成分段的线性区域,用于纬度/雷达图表.
- 获取或设置radius访问器.
- 获取或设置内部的radius(基线)访问器.
- 获取或设置外部的radius(背线)访问器.
- 获取或设置angle访问器.
- 获取或设置内部的angle(基线)访问器.
- 获取或设置外部的angle(背线)访问器.
- 判断获取或定义区域定义存取器.
- 创建弧度生成器.
- 生成一个线性弧度,用于饼图或甜甜圈图.
- 获取或设置内部的半径访问器.
- 获取或设置外部的半径访问器.
- 获取或设置起始角度访问器.
- 获取或设置结束角度访问器.
- 计算弧的重心点.
- 创建符号生成器.
- 生成指定的符号,用于散列图.
- 获取或设置符号类型访问器.
- 获取或设置符号尺寸(in square pixels) 访问器.
- 被支持的符号类型数组.
- 创建新的弦生成器.
- 生成一个二次贝塞尔曲线连接两个弧, 用于弦图.
- 获取或设置弧半径访问器.
- 获取或设置弧起始角度访问器.
- 获取或设置弧结束角度访问器.
- 获取或设置源弧度访问器.
- 获取或设置目标弧度访问器.
- 创建新的斜线生成器.
- 生成一个二维贝塞尔连接器, 用于节点连接图.
- 获取或设置源点访问器.
- 获取或设置目标点访问器.
- 获取或设置一个可选的点变换器.
- 创建一个新的斜线生成器.
- 创建一个二维贝塞尔连接器,用于节点连接图.
坐标轴(Axes)
- 创建一个axis生成器。
- 正式在页面中生成axis。
- get或set坐标轴的scale尺度变换，该尺度变换设定了数值和像素位置的转换规则。
- get或set坐标轴刻度方向。
- 控制坐标轴刻度的产生方式。
- 设置特定的坐标轴的值。
- 指定坐标轴上刻度线的像素长度。
- get或set坐标轴小刻度线的像素长度。
- get或set坐标轴大刻度线的像素长度。
- 指定坐标轴刻度和刻度文字之间的像素距离。
- 设置刻度文字的格式。
- 点击拖拽选择一个二维区域。
- 在页面中某个区域中正式绑定一个brush。
- get或set brush的x变换,用于水平方向的拖拽。
- get或set brush的y变换,用于垂直方向的拖拽。
- get或set brush的选取范围（extent）。
- 设置brush的选取范围（extent）为空。
- 判断brush的选取范围（extent）是否为空。
- get或set brush的事件监听器。可监听3种事件：brushstart, brush, brushend。
- 通过程序触发监听事件，在通过程序设置extent后使用。
d3.time (Time)
时间格式转换(Time Formatting)
- 创建基于某种时间格式的本地时间格式转换器。
- 将一个date对象转换成特定时间格式的字符串。
- 将特定时间格式的字符串转换成date对象。
- 创建基于某种时间格式的世界标准时间（UTC）格式转换器。
- 创建基于某种时间格式的ISO世界标准时间（ISO 8601 UTC）格式转换器。
时间变换(Time Scales)
- 创建一个线性时间变换，定义域为数值区间，值域为时间区间。常用于时间坐标轴的创建。详情可参考d3.scale.linear。
- 输入为一个数值，返回为一个时间。
- 反变换，输入时间返回数值。
- get或set变换的定义域。
- 扩展定义域范围使定义域更规整。
- get或set变换的值域。
- 设置值域，并对结果取整。
- get或set变换的插值函数，如将默认的线性插值函数替换成指数插值函数。
- 设置值域是否闭合，默认不闭合。当值域闭合时，如果插值结果在值域之外，会取值域的边界值。详情参考linear.clamp。
- 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
- 获取格式转化函数，通常用于坐标轴刻度的格式转化。
- 从已有的时间变换中复制出一个变换。
Time Intervals
- 返回一个对于本地时间时间间隔器.
- 效果同interval.floor方法.
- 返回指定区间内日期.
- 下舍入到最近的间隔值.
- 上舍入或下舍入到最近的间隔值.
- 上舍入到最近的间隔值.
- 返回指定时间间隔的日期偏移量.
- 返回对应的UTC时间间隔.
- 返回指定时间基于天起始的时间(默认起始是12:00am).
- 返回指定时间区间和间隔条件的基于天的所有时间,效果同day.range.
- 计算指定时间在年中的天数.
- 返回指定时间基于小时起始的时间(e.g., 1:00 AM).
- 返回指定时间区间和间隔条件的基于小时的所有时间, 效果同hour.range.
- 返回指定时间基于分钟起始的时间 (e.g., 1:02 AM).
- 返回指定时间区间和间隔条件的基于分钟的所有时间,效果同minute.range.
- 返回指定时间基于月起始的时间(e.g., February 1, 12:00 AM).
- 返回指定时间区间和间隔条件的基于月的所有时间,效果同month.range.
- 返回指定时间基于秒起始的时间(e.g., 1:02:03 AM).
- 返回指定时间区间和间隔条件的基于秒的所有时间,效果同second.range.
- 返回指定时间基于Sunday起始的时间(e.g., February 5, 12:00 AM).
- 返回指定时间区间和间隔条件的基于sunday的所有时间, 效果同sunday.range.
- 计算以sunday为基点的指定时间在一年中的周数.
- every Monday (e.g., February 5, 12:00 AM).
- alias for monday.range.
- computes the monday-based week number.
- every Tuesday (e.g., February 5, 12:00 AM).
- alias for tuesday.range.
- computes the tuesday-based week number.
- every Wednesday (e.g., February 5, 12:00 AM).
- alias for wednesday.range.
- computes the wednesday-based week number.
- every Thursday (e.g., February 5, 12:00 AM).
- alias for thursday.range.
- computes the thursday-based week number.
- every Friday (e.g., February 5, 12:00 AM).
- alias for friday.range.
- computes the friday-based week number.
- every Saturday (e.g., February 5, 12:00 AM).
- alias for saturday.range.
- computes the saturday-based week number.
- alias for sunday.
- alias for sunday.range.
- alias for sundayOfYear.
- 返回指定时间基于年起始的时间(e.g., January 1, 12:00 AM).
- 返回指定时间区间和间隔条件的所有时间,效果同year.range.
构图(d3.layout)
- construct a new default bundle layout.
- apply Holten's hierarchical bundling algorithm to edges.
弦图(Chord)
- 初始化一个弦图对象, 返回一个 Chord 实例
- 设置或者获取弦图实例对应的矩阵数据
- 设置或获取弦图各段圆弧之间的间隔角度
- 设置或获取矩阵分组的排序函数
- 设置或获取矩阵二级分组的排序函数
- 设置或获取弦图在z序上的排序函数(决定哪一组显示在最上层)
- 该函数会将参数处理成对 chord 更友好的格式并返回, 若没有提供参数, 会调用matrix()来获取数据
- 该函数参数处理成更易于理解的分组信息, 若没有提供参数, 会调用matrix()来获取数据
集群(Cluster)
- 用默认设置生成一个集群布局对象.
- 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序.
- 获取或设置子结点的访问器.
- 计算并返回指定结点的子结点在集群中的信息(坐标,深度等).
- 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.
- 获取或设置相邻结点间的间隔(不仅限于兄弟结点).
- 获取或设置布局的 宽 和 高 的大小.
- 为结点指定大小.
力学(Force)
-节点（node）基于物理模拟的位置连接。
- 监听布局位置的变化。(仅支持”start”,”step”,”end”三种事件)
- 获得或设置布局中的节点（node）阵列组。
- 获得或设置布局中节点间的连接（Link）阵列组。.
- 获取或设置布局的 宽 和 高 的大小.
- 获取或设置节点间的连接线距离.
- 获取或设置节点间的连接强度.
- 获取或设置摩擦系数.
- 获取或设置节点的电荷数.(电荷数决定结点是互相排斥还是吸引)
- 获取或设置节点的引力强度.
- 获取或设置电荷间互相作用的强度.
- 开启或恢复结点间的位置影响.
- 设置冷却系数为0.1,并重新调用start()函数.
- 立刻终止结点间的位置影响.(等同于将冷却系数设置为0)
- 获取或设置布局的冷却系数.(冷却系数为0时,节点间不再互相影响)
- 让布局运行到下一步.
- 获取当前布局的拖拽对象实例以便进一步绑定处理函数.
层级布局(Hierarchy)
- 获得一个自定义的层级布局的实现.
- 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序.
- 获取或设置子结点的访问器.
- 计算并返回指定结点的子结点信息.
- 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.
- 获取或设置结点的值访问器.
- 重新计算层级布局.
直方图(Histogram)
- 构建一个默认直方图(用来表示一组离散数字的分布,横轴表示区间,纵轴表示区间内样本数量或样本百分比).
- 获取或设置值访问器.
- 获取或设置合法值范围.
- 指定如何将数据分组到不同的区间(bin)里, 返回一个 .
- 根据已设置的区间将数据分组,返回已分组的二维数组(compute the distribution of data using quantized bins).
- 设置直方图Y轴值是区间内数据的总量还是百分比(compute the distribution as counts or probabilities).
层包(Pack)
- 用递归的圆环表现一个多层级布局.
- 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
- 获取或设置子结点的访问器.
- 计算并返回指定结点的子结点信息.
- 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.
- 获取或设置一个函数, 用来计算圆环的大小(近似值).
- 设置整个布局画布的 宽 and 高.
- 如果不想结点半径与结点的值相同, 可以传入一个函数用来计算结点半径.
- 指定相邻结点之点的间距(近似值).
分区(Partition)
- 将一棵树递归的分区.
- 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
- 获取或设置子结点的访问器.
- 计算并返回指定结点的子结点信息.
- 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.
- 设置一个函数来来计算分区的值.
- 设置整个布局画布的 宽 and 高.
- 构建一个默认的饼图.
- 该函数将传入的原始参数转换成可用于饼图或者环形图的数据结构.
- 获取或设置值访问器.
- 设置饼图顺时针方向的排序方法.
- 设置或获取整个饼图的起始角度.
- 设置或获取整个饼图的终止角度.
堆叠图(Stack)
- 构建一个默认的堆叠图(用来展示一系列x轴相同的面积图或者立方图).
- 计算每一层的基线.
- 设置或者获取每层的值访问器.
- 设置每层的排序.
- 指定总的基线算法.
- 设置或获取每层的x轴访问器.
- 设置或获取每层的y轴访问器.
- 设置或获取用来储存基线的输出函数.
- position a tree of nodes tidily.
- 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
- 设置或获取子结点的访问器.
- 计算并返回指定结点的子结点信息.
- 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.
- 设置或获取相隔结点之间的间隔计算函数.
- 指定整个布局的宽和高.
- 给全部结点指定一个固定的大小(会导致失效).
矩阵树(Treemap)
- 返回一个矩阵树对象(用矩阵来展示一颗树).
- 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
- 设置或获取子结点的访问器.
- 计算并返回指定结点的子结点信息.
- 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.
- 设置或获取一个用来计算单元格大小的值访问器.
- 指定整个布局的宽和高.
- 指定父结点和子结点的间距.
- 禁用或启用边界补偿.
- 让布局更”粘”以保证在更新数据时有平滑的动画效果.
- 更改矩阵树的布局算法.
d3.geo (Geography)
- 创建一个新的地理路径生成器.
- 投射指定的特性并且渲染到上下文.
- 获取活设置地理投影.
- 获取活设置渲染上下文.
-获取或设置半径去现实点的特性.
- 计算指定特性的投射区域.
- 计算指定特性的投射重心点.
- 计算指定特性的投射边界.
- 创建地理坐标网生成器.
- 生产一个子午线或平行线的MultiLineStrings.
- 生成一个子午线和平行线的LineString的数组.
- 生成一个表示该坐标网的外框多边形.
- 获取或设置主要的和次要的范围.
- 获取或设置主要范围.
- 获取或设置次要范围.
- 获取或设置主要和次要的步间隔.
- 获取或设置主要的步间隔.
- 获取或设置次要的步间隔.
- 设置或者获取横向精度.
- 创建一个圆形的生成器.
- 使用多边形来生成一个分段的圆形.
- 通过横向和纵向坐标来指定原点.
- 指定以度为单位的角半径.
- 指定分段圆的精度.
- 根据给定特征计算球面面积.
- compute the latitude-longitude bounding box for a given feature.
- compute the spherical centroid of a given feature.
- compute the great-arc distance between two points.
- interpolate between two points along a great arc.
- compute the length of a line string or the circumference of a polygon.
- create a rotation function for the specified angles [λ, φ, γ].
- rotate the given location around the sphere.
- inverse-rotate the given location around the sphere.
Projections
- create a standard projection from a raw projection.
- project the specified location.
- invert the projection for the specified point.
- get or set the projection's three-axis rotation.
- get or set the projection's center location.
- get or set the projection's translation position.
- get or set the projection's scale factor.
- get or set the radius of the projection's clip circle.
- get or set the projection's viewport clip extent, in pixels.
- get or set the precision threshold for adaptive resampling.
- wrap the specified stream listener, projecting input geometry.
- create a standard projection from a mutable raw projection.
- the Albers equal-area conic projection.
- get or set the projection's two standard parallels.
- a composite Albers projection for the United States.
- the azimuthal equal-area projection.
- the azimuthal equidistant projection.
- the conic conformal projection.
- the conic equidistant projection.
the conic equal-area (a.k.a. Albers) projection.
- the equirectangular (plate carreé) projection.
- the gnomonic projection.
- the spherical Mercator projection.
- the azimuthal orthographic projection.
- the azimuthal stereographic projection.
- the raw azimuthal equal-area projection.
- the azimuthal equidistant projection.
- the raw conic conformal projection.
- the raw conic equidistant projection.
the raw conic equal-area (a.k.a. Albers) projection.
- the raw equirectangular (plate carrée) projection.
- the raw gnomonic projection.
- the raw Mercator projection.
- the raw azimuthal orthographic projection.
- the raw azimuthal stereographic projection.
- the raw transverse Mercator projection.
- convert a GeoJSON object to a geometry stream.
- indicate an x, y (and optionally z) coordinate.
- indicate the start of a line or ring.
- indicate the end of a line or ring.
- indicate the start of a polygon.
- indicate the end of a polygon.
- indicate a sphere.
- transform streaming geometries.
- wraps a given stream.
- a stream transform that clips geometries to a given axis-aligned rectangle.
- sets the clip extent.
d3.geom (Geometry)
- create a Voronoi layout with default accessors.
- compute the Voronoi tessellation for the specified points.
- get or set the x-coordinate accessor for each point.
- get or set the y-coordinate accessor for each point.
- get or set the clip extent for the tesselation.
- compute the Delaunay mesh as a network of links.
- compute the Delaunay mesh as a triangular tessellation.
- constructs a quadtree for an array of points.
- add a point to the quadtree.
- recursively visit nodes in the quadtree.
- create a polygon from the specified array of points.
- compute the counterclockwise area of this polygon.
- compute the area centroid of this polygon.
- clip the specified polygon to this polygon.
- create a convex hull layout with default accessors.
- compute the convex hull for the given array of points.
- get or set the x-coordinate accessor.
- get or set the y-coordinate accessor.
d3.behavior (Behaviors)
- 创建一个缩放行为.
- 对指定元素应用缩放.
- the current scale factor.
- the current translate offset.
- optional limits on the scale factor.
- an optional focal point for mousewheel zooming.
- the dimensions of the viewport.
- an optional scale whose domain is bound to the x extent of the viewport.
- an optional scale whose domain is bound to the y extent of the viewport.
- listeners for when the scale or translate changes.
- dispatch zoom events after setting the scale or translate.
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}