暂无个人介绍
我们从Hello World示例代码来看D3如何做数据绑定 ``` var demo = d3.select('body') .selectAll('p') .data(data, function (d) { return d; }); ``` 这段代码执行了以下步骤: 1、通过 d3.sele
D3是指数据驱动文档(Data-Driven Documents),根据D3的官方定义: D3.js是一个JavaScript库,它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准,因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时,它提供了强大的可视化组件,可以让使用者以数据驱动的方式去操作DOM。-
用过kissy的都知道它的选择器有 `Node.one` 和 `Node.all` 两个,前一个是选择第一个结果,后一个是选择所有结果; D3的选择器跟kissy类似,只是名字换成了 `d3.select` 和 `d3.selectAll` ,应该比较好理解; 例如: 选中body标签 var body = d3.select('body'); 选中所有p标签
D3图表大都是由SVG来实现的,所以在继续学习前需要了解一些SVG的知识,可以通过看[svg教程](http://www.w3school.com.cn/svg/)来学习一下。 D3可以生成一般的SVG形状,它也内置了很多SVG图表,方便我们直接生成实用的图表。 我们先来创建一个SVG容器,其它SVG图形都需要在容器里来创建: var body = d3.select('
## 概念 比例尺是一组把`输入域`映射为`输出范围`的函数,它将`真实值`跟`实际显示值`做了一个映射, 在之前的例子中,我们已经用到了线性比例尺; var _x = d3.scale.linear().domain([0,10]).range([0,100]) 它的意思是将`0-10`之间的输入域以线性的方式映射到`0-100`的输出范围上,也就是说传入的值为10,
之前有说到“D3制作图表的过程就是将各种SVG图形拼接在一起的过程”,具体来说折线图表就是`折线图`+`坐标轴`的组合,面积图是`折线图`+`坐标轴`+`面积图` 一个完整的SVG图表,是包含了各种数据、SVG图形、样式、交互组成的组合体,我们以面积图表来做一个示例展示: ## CSS svg{ font-size: 12px; }
前面我们做的各种图表都是静态的,现在没个动效的图表都不好意思拿出手,好在D3为我们提供了过渡动画; 看一个示例([查看在线演示](http://gafish.github.io/demo/d3/transition.html)): ``` var data = [100,200]; var body = d3.select('body'); var svg
# d3.layout.pie() 在第4章*D3 创建SVG*里我们讲过 圆弧图 的制作方法,我们需要准备这样的数据才能画出圆弧: ``` var angle = 2*Math.PI; var data = [ { startAngle: 0, endAngle: 0.2*angle
布局是 D3 中一个十分重要的概念,可以理解成 “制作常见图形的函数”,有了它制作各种相对复杂的图表就方便多了。 D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手。 下图展示了 D3 与其它可视化工具的区别: ![](https://img.alicdn.com/tps/TB1fwG1KFXXXXXbXFXXXXXXXXXX-
# d3.layout.chord() 弦图是一种用于描述节点之间联系的图表。 #### 弦图(Chord)的API说明 * chord.chords - 取回计算的弦角度。 * chord.groups - 取回计算的分组角度。 * chord.matrix - 取得或设置布局需要的矩阵数据。 * chord.padding - 取得或设置弦片段间的角填充。 * cho
# d3.layout.force() 力学图(也称为导向图,也有叫网络拓补图的,反正就是通过排斥得到关系远近的结构)在社交网络研究、信息传播途径等群体关系研究中应用非常广泛,它可以直观地反映群体与群体之间联系的渠道、交集多少,群体内部成员的联系强度等。 #### 力学(Force)的API说明 * force.on - 监听布局位置的变化。(仅支持"start","step",
# d3.layout.tree() 树状图( Tree )用于表示层级、上下级、包含与被包含关系,其布局的用法与集群图几乎完全相同,本章简单通过两个图的对比来讲述两种图表之间的不同之处。 ## 树状图 ![](https://img.alicdn.com/tps/TB1K12dKFXXXXa_XpXXXXXXXXXX-400-497.png) ### 集群图 ![]
# d3.layout.cluster() 集群图是一种用于表示包含与被包含关系的图表。 #### 集群图(Cluster)的API说明 * cluster.children - 取得或者设置子节点的访问器函数。 * cluster.links - 技术树节点之间的父子连接。 * cluster.nodeSize - 为每个节点指定固定的尺寸。 * cluster.node
# d3.layout.pack() 打包图用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者。 #### 打包图(Pack)的API说明 * pack.children - 取得或设置子节点的访问器。 * pack.links - 计算树节点中的父子链接。 * pack.nodes - 计算包布局并返回节点数组。 * pac
# d3.layout.stack() ![](https://img.alicdn.com/tps/TB1FpzeKFXXXXbgXFXXXXXXXXXX-704-472.png) 什么是堆栈图。 例如,有如下情况: 某公司,销售三种产品:个人电脑、智能手机、软件。 2005年,三种产品的利润分别为3000、2000、1100万。 2006年,三种产品的利润分
# d3.layout.treemap() ![](https://img.alicdn.com/tps/TB1y7ZDKVXXXXXDXpXXXXXXXXXX-500-313.png) #### 矩阵图(Treemap)的API说明 * treemap.children - 取得或设置孩子访问器。 * treemap.links - 计算树节点中的父子链接。 * treem
# d3.layout.partition() ![](https://img.alicdn.com/tps/TB1T08VLXXXXXajXpXXXXXXXXXX-500-506.png) 上节中展示的是基本的方形分区图,这节我们要做一个圆形的分区图,圆形图跟方形图基本相同,只有布局函数的 size 函数和绘制图形的部分稍有区别; ## 1、数据 ``` var
# d3.layout.partition() ![](https://img.alicdn.com/tps/TB1SRtWLXXXXXXkXpXXXXXXXXXX-500-499.png) 分区图可以展示为方形或者圆形,从原理上来说它是树状结构的一种可视化展现形式,表示包含与被包含的关系; #### 分区图(Partition)的API说明 * partition.chi
# d3.layout.histogram() ![](https://img.alicdn.com/tps/TB1O0p3LXXXXXXMXFXXXXXXXXXX-500-202.png) 直方图用于描述概率分布,假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],现在把10~20的数值范围分为5段,即: 10~12, 12~14, 14
![](https://img.alicdn.com/tps/TB13wWgLXXXXXcsXVXXXXXXXXXX-500-501.png) 前20节中,我们讲了各种静态D3图表的制作,好的图表应该是要与用户进行互动的,这节来讲讲D3的交互事件; ## d3.event selection选择器事件监听的写法跟平时我们用的jQuery类似,如: selection.on(
# d3.layout.bundle() ![](https://img.alicdn.com/tps/TB19Q82LXXXXXawXVXXXXXXXXXX-500-500.png) 下图是航班查询网站全球航班雷达(FlightRadar24)显示的今日长三角地区的飞机飞行图: ![](https://img.alicdn.com/tps/TB1jp4WLXXXXXaraXXX
# d3.geom.polygon ![](https://img.alicdn.com/tps/TB1dXPjLXXXXXXBXVXXXXXXXXXX-500-506.png) polygon函数有3个用途: * polygon.area() 用来计算多边形面积; * polygon.centroid() 用来计算多边形中心坐标; * polygon.clip(subject)
# d3.geom.quadtree ![](https://img.alicdn.com/tps/TB1blCKLXXXXXbUXVXXXXXXXXXX-500-500.png) 四叉树也被称为Q树(Q-Tree)。四叉树广泛应用于图像处理、空间数据索引、2D中的快速碰撞检测、存储稀疏数据等,对游戏编程,这会很有用。 四叉树(Q-Tree)是一种树形数据结构。四叉树的定义是:它
# d3.geom.voronoi() ![](https://img.alicdn.com/tps/TB1iAuLLXXXXXchXFXXXXXXXXXX-500-501.png) 在日常生活中有这样的场景,在一个城市中有很多的便利店,当你走在城市的任意地方,怎么才能找到离你了近的便利店呢?这种场景就适合用泰森多边形来解决。 通过一个示例来展示。 ## 1、数据 `
# d3.geo ![](https://img.alicdn.com/tps/TB1M2eWLFXXXXcXXFXXXXXXXXXX-920-688.png) 在学习D3如何制作地图前,我们需要了解下地图的数据格式geoJSON,GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式。 本节我们将制作一幅中国地图,使用
# d3.geom.hull ![](https://img.alicdn.com/tps/TB1mDHDLXXXXXcNXpXXXXXXXXXX-500-381.png) hull函数用于计算指定坐标点的外围边界,用一个场景来描述,某片草原上有100只羊在不同的位置,我们需要将羊群所在的草场圈起来,那只要将羊群最外围的羊通过一根线连起来就可以实现,同理,hull就是用来计算这个外围边
## 概念 通过上篇文章,初步接触Git的朋友应该已经对Git有所了解了,既然你已经打开了这篇文章,说明你对深入了解Git有强烈的欲望,那就跟着我一起先来深入了解一下Git相关的概念。 ### 工作区(Working Directory) 就是你在电脑里能看到的目录,比如上文中的 **reading-ist** 文件夹就是一个工作区 ![](https://img.alic
## 简介 Git是一种分布式版本控制系统,它可以不受网络连接的限制,加上其它众多优点,目前已经成为业界做项目版本管理时的首选。 Tips:非开发人员也可以用Git来做自己的文档版本管理 2013年,淘宝前端团队开始全面采用Git来做项目管理,我也是那个时候开始接触和使用Git,到目前刚好3年时间。Git的api很多,但其实平时项目中90%的需求都只需要用到几个基本的功能