D3.js学习笔记十一:使用JSON作为动态数据源

D3.js学习笔记十一:使用JSON作为动态数据源
D3.js学习笔记十一:使用JSON作为动态数据源 要解决的问题 从静态数据到读取文本,这些都不是我们想要的,我们使用动态图表,主要是为了展现从数据库里面读取的内容,如果不能接受数据库数据,那多绚丽的效果都是渣!D3.js能够接受XML数据和Json数据,这个对于开发来讲,才是最强大的。本来嘛,通过js读取Json,这个就是绝配,关于Json,百度百科里面这样解释: JSON(JavaScript Object Notation) 是一种...

D3.js学习笔记十:使用CSV文件作为动态数据源

D3.js学习笔记十:使用CSV文件作为动态数据源
D3.js学习笔记十:使用CSV文件作为动态数据源 要解决的问题 D3.js支持从外部读取数据进行图形交互(Loading External Resources),支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML数据结构,下面列出了它的读取外部资源的类型,是从它的wiki里面截取下来的。 d3.text - 请求一个text文件。 d3.json - 请求一个JSON。 d3.html - 请求一个html文本片段。 d3.xml - 请求一个XML文本片段。 d3.csv -...

D3.js学习笔记九:打包折线图作为类库

D3.js学习笔记九:打包折线图作为类库
要解决的问题 可能需要在画布上添加多个折线图,并使它们可以进行数据交互,那么要求折线图部件是可复用的,因此,有必要将它打包成为一个类,这样用户在添加折线图的时候就无须了解内部运作机制,直接调用类就可以了。 打包折线图类 将折线图打包成一个名为magicdataLine的类,这次算是比较正式的进行代码编写,因此改动幅度相当大,将代码的逻辑重新梳理了一下,并且摒弃掉了一些无用的环节,修正了折线...

D3.js学习笔记八:折线图的鼠标响应和向下钻取

D3.js学习笔记八:折线图的鼠标响应和向下钻取
要解决的问题 我当初为什么选择D3.js?不是因为它的图像多么绚丽,那是作图软件的基本功能,如果只是为了做一些静态图像,那没有必要费劲来写这个代码,选择它,主要是因为它在作图的同时还具有交互性,能够自由操控图像元素,这才是SVG的精华所在。目前为止,已经完成了折线图的绘制工作,接下来为折线图设置交互行为。 为折线图增加鼠标悬停行为 在折线图的圆点上设置鼠标监控事件,当鼠标移动到圆形上...

D3.js学习笔记七:多系列折线图与图例

D3.js学习笔记七:多系列折线图与图例
要解决的问题 现在这个统计图还要解决几个问题:支持多个系列、为多系列加入图例。 现在的数据是单条折线,如果有多条折线,那么需要为它指定不同的名称和颜色,为它们指定图例,指定图例以后,我们通过图例来控制折线的显示和隐藏。 通过多维数组产生折线 首先调整产生数据系列的函数,使它产生不定长度的随机数,每一个系列为一个数组,并指定折线名称。 //产生随机数据 function getData() { var lineN...

D3.js学习笔记六:让折线图数据可变

D3.js学习笔记六:让折线图数据可变
要解决的问题 现在这个统计图还要解决几个问题:数据长度可变、支持多个系列、为多系列加入图例。 现在统计图的数据长度是固定的,如果数据个数变化,那么多余的点还会存在,我们需要根据数据顶点个数来控制点的数量。如果数据是多个系列还要解决各个系列数据长度不同的问题。 实现可变长度的动画 首先调整产生数据系列的函数,使它产生不定长度的随机数,并且返回新数据的长度。 //产生随机数据 function...

D3.js学习笔记五:为折线图添加标题和网格线

D3.js学习笔记五:为折线图添加标题和网格线
要解决的问题 现在这个统计图还要解决几个问题:为图表加入标题、作图区的网格线、支持多个系列、为多系列加入图例。 为了添加标题和图例,我们需要修改作图区的大小,为它们预留位置,如果没有这些元素的话,还需要将这些保留的位置变为作图区。添加多系列并且支持动画,需要解决数据系列长度前后不一致导致的顶点添加和删除的问题。 为图表添加标题 为图表插入标题和副标题很简单,我们只需要为它添加两...

D3.js学习笔记四:画一个折线图

D3.js学习笔记四:画一个折线图
作图思路 参照上图,折线图有几个元素需要绘制,背景、标题栏、副标题、横纵坐标轴及标签、图例和折线(包括上面的圆点标记),我们分别将它们画出来,随数据更新还要将旧的数据删除。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>画一个折线图</title> <script type="text/javascript" src="js/d3.js"></script>...

D3.js学习笔记三:与网页元素的交互

D3.js学习笔记三:与网页元素的交互
传统的javascript能够和网页元素互动,那么D3没理由不支持这一行为,在D3中append语法可以为DOM添加网页元素。我们看一个例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script> <style type="text/css"> ...

D3.js学习笔记二:D3.js语法规范

D3.js学习笔记二:D3.js语法规范
标准的D3.js文档语法示例 我们使用如下的文档产生一个类似柱形图的图形,借此说明D3.js的语法规范: <!DOCTYPE html> <html><head> <title>语法演示.htm</title> <script type="text/javascript" src="js/d3.js"></script> </head> <body> <script type="text/javascript"> var h=600; //设置数据集 var dataset = [ 0, 100, 200, 300,400,50...
Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: