1. 云栖社区>
  2. 全部标签>
  3. #D3#
D3

#D3#

已有0人关注此标签

内容分类:
博客 | 问答 | 视频 | 资料 |

D3数据连接之“更新”和“退出”

昨天的推送中,我们阐述了数据连接的进入阶段。本文中,我们学习一下其更新和退出机制。 本文选自《图说D3:数据可视化利器从入门到进阶》。

数据 D3

D3数据连接:进入

数据连接是D3中的面包和黄油。D3不提供制图的基础函数,相反,它靠的是数据连接。数据连接可以让页面元素进入网页,一旦进入,可以修改、更新及退出。本文将主要介绍“进入”部分。 本文选自《图说D3:数据可视化利器从入门到进阶》。

D3 数据科学

开启D3:是什么让程序员与设计师如此钟爱

D3是一个开源的JavaScript程序库。它对设计师来说很友好,因为它能让设计师使用SVG这种常见的图形格式进行创作。它对程序员来说也很合适,因为它是兼容Web标准的。下面让我们开启D3,聊聊这个在Web上实现数据可视化最牛的工具。 本文选自《图说D3:数据可视化利器从入门到进阶》。

javascript svg D3

【D3.js 学习总结】2、D3数据绑定

我们从Hello World示例代码来看D3如何做数据绑定 ``` var demo = d3.select('body') .selectAll('p') .data(data, function (d) { return d; }); ``` 这段代码执行了以下步骤: 1、通过 d3.sele

数据可视化 阿里技术协会 js demo update D3

【D3.js 学习总结】1、初识D3

D3是指数据驱动文档(Data-Driven Documents),根据D3的官方定义: D3.js是一个JavaScript库,它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准,因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时,它提供了强大的可视化组件,可以让使用者以数据驱动的方式去操作DOM。-

javascript 数据可视化 阿里技术协会 js 浏览器 Render demo D3

【D3.js 学习总结】3、D3选择器

用过kissy的都知道它的选择器有 `Node.one` 和 `Node.all` 两个,前一个是选择第一个结果,后一个是选择所有结果; D3的选择器跟kissy类似,只是名字换成了 `d3.select` 和 `d3.selectAll` ,应该比较好理解; 例如: 选中body标签 var body = d3.select('body'); 选中所有p标签

数据可视化 函数 LOG 阿里技术协会 kissy js node string demo D3

【D3.js 学习总结】4、D3 创建SVG

D3图表大都是由SVG来实现的,所以在继续学习前需要了解一些SVG的知识,可以通过看[svg教程](http://www.w3school.com.cn/svg/)来学习一下。 D3可以生成一般的SVG形状,它也内置了很多SVG图表,方便我们直接生成实用的图表。 我们先来创建一个SVG容器,其它SVG图形都需要在容器里来创建: var body = d3.select('

数据可视化 HTTPS 阿里技术协会 path js svg D3

【D3.js 学习总结】6、D3比例尺

## 概念 比例尺是一组把`输入域`映射为`输出范围`的函数,它将`真实值`跟`实际显示值`做了一个映射, 在之前的例子中,我们已经用到了线性比例尺; var _x = d3.scale.linear().domain([0,10]).range([0,100]) 它的意思是将`0-10`之间的输入域以线性的方式映射到`0-100`的输出范围上,也就是说传入的值为10,

数据可视化 HTTPS 阿里技术协会 js D3

【D3.js 学习总结】5、D3 SVG图表示例

之前有说到“D3制作图表的过程就是将各种SVG图形拼接在一起的过程”,具体来说折线图表就是`折线图`+`坐标轴`的组合,面积图是`折线图`+`坐标轴`+`面积图` 一个完整的SVG图表,是包含了各种数据、SVG图形、样式、交互组成的组合体,我们以面积图表来做一个示例展示: ## CSS svg{ font-size: 12px; }

数据可视化 阿里技术协会 js svg D3

【D3.js 学习总结】7、D3过渡动画

前面我们做的各种图表都是静态的,现在没个动效的图表都不好意思拿出手,好在D3为我们提供了过渡动画; 看一个示例([查看在线演示](http://gafish.github.io/demo/d3/transition.html)): ``` var data = [100,200]; var body = d3.select('body'); var svg

函数 阿里技术协会 js svg D3

【D3.js 学习总结】9、D3布局-饼状图

# d3.layout.pie() 在第4章*D3 创建SVG*里我们讲过 圆弧图 的制作方法,我们需要准备这样的数据才能画出圆弧: ``` var angle = 2*Math.PI; var data = [ { startAngle: 0, endAngle: 0.2*angle

数据可视化 HTTPS 阿里技术协会 布局 js 容器 ARC svg D3

【D3.js 学习总结】8、D3布局介绍

布局是 D3 中一个十分重要的概念,可以理解成 “制作常见图形的函数”,有了它制作各种相对复杂的图表就方便多了。 D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手。 下图展示了 D3 与其它可视化工具的区别: ![](https://img.alicdn.com/tps/TB1fwG1KFXXXXXbXFXXXXXXXXXX-

数据可视化 HTTPS 阿里技术协会 布局 js cluster 集群 D3

【D3.js 学习总结】11、D3布局-弦图

# d3.layout.chord() 弦图是一种用于描述节点之间联系的图表。 #### 弦图(Chord)的API说明 * chord.chords - 取回计算的弦角度。 * chord.groups - 取回计算的分组角度。 * chord.matrix - 取得或设置布局需要的矩阵数据。 * chord.padding - 取得或设置弦片段间的角填充。 * cho

数据可视化 HTTPS 阿里技术协会 path 布局 js index svg D3

【D3.js 学习总结】10、D3布局-力学图

# d3.layout.force() 力学图(也称为导向图,也有叫网络拓补图的,反正就是通过排斥得到关系远近的结构)在社交网络研究、信息传播途径等群体关系研究中应用非常广泛,它可以直观地反映群体与群体之间联系的渠道、交集多少,群体内部成员的联系强度等。 #### 力学(Force)的API说明 * force.on - 监听布局位置的变化。(仅支持"start","step",

数据可视化 函数 阿里技术协会 布局 js source svg 数组 D3

【D3.js 学习总结】13、D3布局-树状图

# d3.layout.tree() 树状图( Tree )用于表示层级、上下级、包含与被包含关系,其布局的用法与集群图几乎完全相同,本章简单通过两个图的对比来讲述两种图表之间的不同之处。 ## 树状图 ![](https://img.alicdn.com/tps/TB1K12dKFXXXXa_XpXXXXXXXXXX-400-497.png) ### 集群图 ![]

数据可视化 HTTPS 阿里技术协会 http 布局 js 集群 demo html github D3

【D3.js 学习总结】12、D3布局-集群图

# d3.layout.cluster() 集群图是一种用于表示包含与被包含关系的图表。 #### 集群图(Cluster)的API说明 * cluster.children - 取得或者设置子节点的访问器函数。 * cluster.links - 技术树节点之间的父子连接。 * cluster.nodeSize - 为每个节点指定固定的尺寸。 * cluster.node

数据可视化 函数 HTTPS 阿里技术协会 布局 js cluster 集群 node svg D3

【D3.js 学习总结】14、D3布局-打包图

# d3.layout.pack() 打包图用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者。 #### 打包图(Pack)的API说明 * pack.children - 取得或设置子节点的访问器。 * pack.links - 计算树节点中的父子链接。 * pack.nodes - 计算包布局并返回节点数组。 * pac

数据可视化 HTTPS 阿里技术协会 布局 js svg D3

【D3.js 学习总结】15、D3布局-堆栈图

# d3.layout.stack() ![](https://img.alicdn.com/tps/TB1FpzeKFXXXXbgXFXXXXXXXXXX-704-472.png) 什么是堆栈图。 例如,有如下情况: 某公司,销售三种产品:个人电脑、智能手机、软件。 2005年,三种产品的利润分别为3000、2000、1100万。 2006年,三种产品的利润分

数据可视化 阿里技术协会 布局 js 容器 数据类型 svg D3

【D3.js 学习总结】16、D3布局-矩阵图

# d3.layout.treemap() ![](https://img.alicdn.com/tps/TB1y7ZDKVXXXXXDXpXXXXXXXXXX-500-313.png) #### 矩阵图(Treemap)的API说明 * treemap.children - 取得或设置孩子访问器。 * treemap.links - 计算树节点中的父子链接。 * treem

数据可视化 阿里技术协会 布局 js 容器 数组 D3

【D3.js 学习总结】19、D3布局-直方图

# 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 阿里技术协会 布局 js 容器 svg 数组 D3

2
GO