D3制作基础图表学习总结(part1)
一、基本的环境搭建(和使用其他框架或js库一样)
1.建立一个工程:
2.在html文件中引入D3的文件:
附上git地址:https://github.com/d3/d3/wiki
二、建立图表
1.线性图表:
画线条的思路(下面代码都在js文件中编写,并在htm文件中引入自己写的该js文件):
1)设置存放曲线的位置
给html文件中的container容器添加节点svg,并为svg节点设置宽、高。
在svg节点中添加一个g节点(存放线条)并设置其位置(用了css3中的位移属性)。
2)画线
选择节点g,并在节点g内添加节点path并为其添加属性d,同时再给d属性赋值(路径数据)(图中第一步)。
定义访问器函数,用路径生成器制造路径数据(图中第二步)。
将线条按要求缩放(图中第三步)
3)改变线条颜色和宽度:
详解:
D3文档中对path有如下解释:
D3文档中对数据生成器的解释:
D3文档对比例尺的解释:
地址:https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA#linear
画坐标的思路:
1.用d3.svg.axis()分别设置x轴和y轴
d3.svg.axis()为默认轴,后面.scale(scale_x)即设置了刻度尺(scale_x为数值比例尺)。y轴上的.orient()方法是设置轴的方位(此处设置为left,轴在左边显示)。
2.设置存放轴的节点g,用call方法给节点添加轴。
3.改变坐标轴的颜色:
详解:
D3文档中对轴的解释:
git地址: https://github.com/d3/d3/wiki/SVG-%E8%BD%B4#axis
D3中的选择器之call方法:
地址:https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8#call
2.面积图表:
面积图表只需要在线性图表上稍做改动即可。
D3文档中的svg函数中有很多类型的生成器(地址:https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C):
3.柱状图表
思路:同画线性或面状图表一样,先建立一个容器,在再容器里面添加svg节点,然后再在svg节点里面添加内容。
在svg里选择元素,然后用data方法将选择的元素与数据绑定起来;enter()方法代表在选择的元素不存在但是现在有数据的情况使用,enter().append("g")代表现在创建新的节点来匹配我们的数据,多少个数据就生成多少个节点。
开始画矩形:bar.append("rect")在每一个与数据绑定了的g节点里面添加矩形,然后相应的设置每个矩形的y轴坐标、宽度、高度(坐标原点在屏幕的左上角,所以矩形的高度应该为设定的整个svg节点的高度-y轴坐标),确定好矩形的左上角的点的坐标和矩形的宽高之后矩形就画好了,再用.style("fill","颜色")给矩形填充颜色。
最后放大画好的柱状图:同画上面两种图表一样,设定比例尺(如:d3.scale.linear()).
(对比学习HTML5画形状和填充颜色方法:http://www.runoob.com/tags/ref-canvas.html)
(画红框那一块 改为下面代码
)
最后为每个柱状上添加数据:每个矩形柱上添加一个text节点,然后用.text()方法给节点添加内容(jquery中的text方法意义类似),以上的.atrr()方法同时为多个属性设值,
详解:
(更多选择元素上的方法:https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8#d3_selectAll)
4.使用文件中的数据以及自定义坐标数据
使用文件中的数据画图表:
直接使用文件中的数据没法使用的,因为安全机制,我们不可以直接读取本地文件中的数据,必须要在本地安装一个web服务器(如python、node.js等等),我用的node.js作为本地服务器。
(node.js安装教程:http://www.runoob.com/nodejs/nodejs-install-setup.html)
安装好之后,打开
然后在命令行提示框输入下面两行启动服务器。
我的node安装在c盘,工程和安装的node在同一个目录下,启动服务器之后,直接在地址栏输入完整地址就可以读取到文件:
data.csv文件里面的内容:
1. 读取文件中的数据(替换掉之前直接写的数据):
读取之后呈现的形式如下:
2.使用数据:
自定义坐标轴:
初步接触,学的不深入,总结下来方便自己以后学习使用。(案例学习来自慕课网)
D3制作基础图表学习总结(part1)的更多相关文章
- 利用Highcharts制作web图表学习(二)
最近中海油的项目需要用到图表展示数据,最近还是一直边学习边开发,今天做了一个展示,炼化厂加热炉效率展示的柱状图,把代码贴出来,大家指点一下互相学习,我是通过数组给Highcharts绑定的值, ...
- 利用Highcharts制作web图表学习(一)
前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网 一.先说说HighCharts的 ...
- javascript入门视频第一天 小案例制作 零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
- 学会网页制作,web app开发,必须先从语法基础开始学习
做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果. 前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言. ...
- Excel基础—为什么学习Excel
吾生也有涯,而知也无涯 点赞再看,养成习惯 自从个人计算机开始普及以后,Excel就得到了广泛的传播,工作学习生活中不处不存在Excel的影子,不论是考勤,工资还是其他的统计等等,都离不开Excel. ...
- NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者
NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者 作者: raindy 来源:http://bbs.hanzify.org/index.php?showtopic=30029 时间: ...
- GCC基础知识学习
GCC基础知识学习 一.GCC编译选项解析 常用编译选项 命令格式:gcc [选项] [文件名] -E:仅执行编译预处理: -S:将C代码转换为汇编代码: -c:仅执行编译操作,不进行连接操作: -o ...
- (转)Linux基础知识学习
Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过 ...
- Linux随笔-鸟哥Linux基础篇学习总结(全)
Linux随笔-鸟哥Linux基础篇学习总结(全) 修改Linux系统语系:LANG-en_US,如果我们想让系统默认的语系变成英文的话我们可以修改系统配置文件:/etc/sysconfig/i18n ...
随机推荐
- MyEclipse中直接打开class文件的方法
安装步骤: 1>下载jad.exe(这是一个class文件的反编译工具,但是是命令行运行编译,使用起来不是很方便:), 将其拷贝到%JAVA_HOME%/bin目录下(其他目录也可). 2> ...
- 用Python3实现表达式求值
一.题目描述 请用 python3 编写一个计算器的控制台程序,支持加减乘除.乘方.括号.小数点,运算符优先级为括号>乘方>乘除>加减,同级别运算按照从左向右的顺序计算. 二.输入描 ...
- datatables ajax后端请求那些坑
在对datatables做后端数据填充的时候,遇到一个,翻页问题.在多次操作翻页后,总是提示加载中.反了很多博客没有找到原因. 经过测试,发现原来自己坑了自己. 代码如下: datatables : ...
- HBASE学习笔记-初步印象
HBASE概念: HBASE是一个分布式架构的数据库,通过对数据进行多层的分块打散储存.从而改写传统数据库的储存能力和读取速度. HBASE的集群服务器: HBASE的集群主要分为Zookeeper集 ...
- 禁用CMFCRibbonApplicationButton的单击和双击事件
为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...
- dis进行反编译
摘录自官方文档: https://docs.python.org/2/library/dis.html 回头自己也脑补下. 可以使用dis查看自己代码的复杂度之类的东西. 比如while 1 和whi ...
- iOS 打电话 发短信(转载)
官方代码 发短息和邮件添加MessageUI.framework 库 发送信息 - (IBAction)showSMSPicker:(id)sender { // You must check tha ...
- 不就ideas嘛,谁没有!
20160214 survey of current RDF triple storage systems survey of semantic web stack inference mechani ...
- MyEclipse JAX-WS Web Service
在Myeclipse8.5下开发Web service程序,目前系统支持的开发框架有3个,JAX-WS,REST(JAX-RS),XFire.其中系统建议不要使用XFire 的框架,可能是要被淘汰了( ...
- Your stream was neither an OLE2 stream, nor an OOXML stream.问题的解决
先说说问题的来源 ,使用NPOI读取Except,先通过流来读取,如果符合要求,就将流保存为文件. 众所周知,流只能读一次,所以在流读取之前需要将流拷贝一份,保存文件的时候使用. protected ...