d3.js初识

d3.js简单的入门

D3是一个JavaScript的框架：主要用途是数据的可视化，

所以他是在JavaScript下开发的，目前主要用的有D3.js 3.0版本和D3.js 4.0版本

使用方法非常简单，1.到官网下载d3.js，然后在html中添加就好了。

2.或者直接链接到官网就行了。

它只能目前用于IE 8版本之上。

1.一些简单的操作

d3.select //选择元素

d3.selectAll //选择所有元素

d3.attr //修改属性

d3.append //添加元素

d3.classed //添加css class

d3.style //给指定元素添加样式

d3.text //获取或者设置文字信息

d3.html //用来修改元素内的html

2.引入知识

svg

3.简单的图形

4.比例尺

5.数轴

6.加上一些特效

7.简单图表处理之柱状图

8.简单图表处理之折线图

9.简单图表处理之面积图

10.简单图表处理之饼状图

11.来上一些交互

简单的柱状图步骤：

1.定义一个画布

2.定义数据和比例尺

3.定义一个数轴

4.添加矩形

5.添加文字信息

6.添加坐标轴元素

时间： 2024-11-08 04:23:17

d3.js初识的相关文章

D3.js系列 --- 初识

D3.js(Data-Driven Documents)即被数据驱动的文档,它是一个用于根据数据来操作文档的JavaScript库.相比于echart, antv等其他图表库,它算是一个比较底层的数据可视化工具.它不提供任何一种现成的图表,只做最基础的东西,所有的图表都需要我们在它的库里挑选合适的方法进行构建.在一切即数据的今天,我们更需要做到让数据活起来,展现数据之美. 简介犹抱琵琶半遮面,千呼万唤中终于要接触数据可视化了.数据可视化越来越流行,让复杂的数据和文字变得十分容易理解.作为其中的

d3.js学习

画svg图像 1.添加svg元素 2.添加g元素,g元素是一个分组的元素,相当于html中的div元素 3.画图像 4.画坐标轴 ----------------------------------------------------------------------------- d3画闲线性曲线例子 html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法如果没有足够的元素,那么处理方法通常是使用append()添加元素.请看下面的代码: <body> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p

Learning D3.js d3的path讲解

转帖: http://jsbin.com/omajal/23/edit?html,output svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等.W3 标准对SVG 的Path定义如下SVG路径代表一个形状的轮廓,可以描边,填充,用作剪切路径,或任何三者的结合.W3提供了一个形象的比喻,用钢笔和纸来表示svg的path* 想象一个钢笔放在一张纸上.* 钢笔在某点与纸接触.* 笔尖移动到另一处.* 这两个

【 D3.js 入门系列 — 11 】入门总结

D3 新专题首页一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少

【 D3.js 进阶系列 — 6.0 】拖拽的应用（Drag）

拖拽(Drag)是交互式中很重要的一种,本文将讲解拖拽的使用方法. 1. drag的定义 D3中可用 d3.behavior.drag() 来定义 drag 行为. var drag = d3.behavior.drag() .on("drag", dragmove); function dragmove(d) { d3.select(this) .attr("cx", d.cx = d3.event.x ) .attr("cy", d.cy =

【 D3.js 入门系列 --- 9.6 】打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据: city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: Hello World 1 Hello World 2 Hello World 3 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

【D3.js数据可视化实战】--（3）桑基图（sankey）的绘制

什么是桑基图用D3绘制简单的Sankey图添加文字圆形节点添加交互效果注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量,人口,经济等的流动情况.最早由爱尔兰人Matthew Henry Phineas Riall Sankey 提出.Sankey是一名船长也是工程师,1898年Sankey在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图,后来被命名为Sankey图,中文音译为桑基图