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

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

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

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

JavaScript入门与实战

52 课时 |
19699 人已学 |
免费

JavaScript 自学手册文档教程

65 课时 |
3411 人已学 |
免费
开发者课程背景图

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

社区圈子

开发与运维
开发与运维
集结各类场景实战经验,助你开发运维畅行无忧
6402+人已加入
加入
相关电子书
更多
现代Javascript高级教程
JS零基础入门教程(上册)
Javascript异步编程
立即下载 立即下载 立即下载

JavaScript更多学习相关