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...

D3.js学习笔记一:认识SVG图形

D3.js学习笔记一:认识SVG图形
直线 使用line标签插入直线,它有4个基本属性:x1:起点横坐标、y1:起点纵坐标、x2:终点横坐标、y2:终点纵坐标,用以下代码可以画一条直线: <svg> <line x1="0" y1="0" x2="100" y2="100" stroke="#F00"/> </svg> 矩形 使用rect标签插入矩形,它有4个基本属性:x:起点横坐标、y:起点纵坐标、width:宽度、height:长度,用以下代码可以画一个100×100的矩形: <svg> <rect x...

D3js Layout 详解Cluster —- 集群图

D3js Layout 详解Cluster  —-  集群图
集群图( Cluster )通常用于表示包含与被包含关系。 现在我们给出数据,并将其可视化。数据的内容为:中国里包含的部分省份,省份里包含的部分城市。我们讲数据文件写在一个 JSON 文件中,再用 D3 来读取。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于它的语法规则,请各位自行查询百度百科等。数据如下: { "name":"中国", "children": [ { "name":"浙江" , "children": [ {"nam...

D3js Layout 详解Bundle —- 捆图

D3js Layout 详解Bundle  —-  捆图
<!DOCTYPE html> <meta charset="utf-8"> <style> .node { font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; } .link { stroke: steelblue; stroke-opacity: .4; fill: none; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> //图形的高度 var diameter = 960, //圆的半径 radius = diameter / 2, //内圆...

D3js学习–update, enter, exit 的使用

D3js学习–update, enter, exit 的使用
1. update() 当对应的元素正好满足时 ( 绑定数据数量 = 对应元素 ) 实际上并不存在这样一个函数,只是为了要与之后的 enter() 和 exit() 一起说明才认为有这样一个函数。当对应元素正好满足时,后面直接跟 text ,style 等操作即可。 2. enter() 当对应的元素不足时 ( 绑定数据数量 > 对应元素 ) 当对应的元素不足时,要添加元素,使之与绑定数据的数量相等。后面跟 append 函数添加元素。 3. exit(...

d3js学习–动态柱状图

d3js学习–动态柱状图
<html> <head> <meta charset="utf-8"> <title>Transition</title> </head> <style> .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <scr...

d3.js程序–复杂柱状图

d3.js程序–复杂柱状图
<html> <head> <meta charset="utf-8"> <title>Chart</title> </head> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script>...

第一个d3.js程序-柱状图

第一个d3.js程序-柱状图
<html> <head> <meta charset="utf-8"> <title></title> <style> .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> va...
Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: