- 博客(17)
- 收藏
- 关注
RSS订阅原创 d3.js——绘制动态中国地图
可拖动的地图 .link { stroke: #ccc; stroke-width: 1; }一、常规设置：var width = 1000, height = 1000;var svg = d3.select("body").append("svg") .attr("width",width)
2016-04-29 14:34:39
7725
1
原创 d3.js——绘制打包图
打包图其实就是画圈圈，就把数据通过d3.layout.pack()转换一下即可咯~ 打包图/** * Created by Silence_C on 2016/4/27. */var width = 600, height = 600;//定义数据转换函数var pack = d3.layout.pack().size([width,he
2016-04-27 14:50:29
2620
原创 d3.js——树状图的绘制
树状图和集群图其实差不多，就一点点不一样，见下图：图（1）：集群图——d3.layout.cluster()图（2）：树状图——d3.layout.tree()这样一来差别就看出来了。由于两者的代码差不多，这里就直接附上树状图源码，不多加解释咯~city.json文件：{ "name":"中国", "children": [
2016-04-27 13:51:10
29502
11
原创 d3.js——集群图的绘制
数据源：city.json：{ "name":"中国", "children": [ { "name":"浙江" , "children": [ {"name":"杭州" }, {"name":"宁波" }, {"name":"温州" }, {"name":"绍兴" }
2016-04-26 16:48:12
1958
原创 d3.js——弦图的绘制
首先我们要明白弦图所要表达的意思是什么？比如我们有以下一组关于地区人口的数据：var city_name = ["北京","上海","广州","深圳","香港"];var population = [ [1000,3015,4567,1234,3714], [3214,2000,2060,124,3234], [8761,6545,3000,8045,647],
2016-04-26 14:25:36
3087
原创 d3.js——绘制力学图
绘制力学图总结为如下步骤：一、确定数据源： 绘制力学图，你需要知道定点和边，如下：var nodes = [ {name:"GuiLin"}, {name:"GuangZhou"}, {name:"XiaMen"}, {name:"HangZhou"}, {name:"ShangHai"}, {name:"QingDao"}
2016-04-26 10:12:18
3876
原创 d3.js——绘制饼状图
饼状图/** * Created by Silence_C on 2016/4/25. */var width = 600, height = 600;var dataset = [30,10,43,55,13];var svg = d3.select("body").append("svg") .attr("width",width)
2016-04-25 15:25:37
1448
1
原创 d3.jd——监听鼠标事件
对一个被选择的元素，添加监听操作，代码如下：.on("click", function(){ } ) 常用的事件（event）有：click ： 鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起mouseover ： 鼠标移到某元素上mouseout ： 鼠标从某元素移开mousemove ： 鼠标被移动mousedown
2016-04-25 13:45:21
15888
原创 d3.js——update、enter、exit
1. update() 当对应的元素正好满足时 （ 绑定数据数量 = 对应元素 ） 实际上并不存在这样一个函数，只是为了要与之后的 enter 和 exit 一起说明才想象有这样一个函数。但对应元素正好满足时，直接操作即可，后面直接跟 text ，style 等操作即可。2. enter() 当对应的元素不足时 （ 绑定数据数量 > 对应元素 ） 当
2016-04-25 11:33:43
597
原创 d3.js—— 绘制二维数组的动态图表
在绘制二维数组的动态图表之前，我们先来理一下思路：1、我们需要绘制一张图表；2、这张图表的数据来源是二维数组；3、这张图表有动态效果。那么，我们一步一步来：首先，我们来随意写一串二维数组，确定数据来源：var data =[[1993,10],[1998,20],[2002,25],[2007,30],[2010,50],[2015,80],[2016,90]]然后，我
2016-04-15 15:19:39
3979
原创 d3.js——面积图表的制作
在上一篇的文章里我们可以知道，线型图表的制作主要是采用了 d3.svg.line() 这个函数进行绘制的，比较线型图表的绘制方法，我们只要采用 d3.svg.area() 这个函数即可实现面积图表的绘制啦~！ 具体代码实现如下啦~：/** * Created by Silence_C on 2016/4/14. */var width = 500,height = 200;marg
2016-04-15 14:57:02
2576
原创 D3.js初体验 —— 线型图表与坐标轴的绘制
我们先来说一下利用D3来绘制线型图表与坐标轴的思路：1、定义图表容器：container2、定义一些数据来生成数据曲线3、给图表添加坐标轴，包括文字接下来就开始干活吧!创建好HTML文件d3Test.html： D3 Test! //注意导入d3.js文件，或者也可以直接引入：script src="http://d3
2016-04-13 16:40:47
5487
原创 canvas 动画制作——时钟
Our Time! 很抱歉，您的浏览器不支持canvas标签！ var cs = document.getElementById("ourTime"); var ctx = cs.getContext("2d"); function ourTime() { //每调用一次，清除一次画布 ctx.clearRect(0,
2016-04-12 12:14:03
596
原创 HTML5 canvas 制作动画原理
使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形以下为简单的绕某一中心点进行旋转的动画代码，注意加红的三行代码，加上第三行是绕图片本身的中心进行旋转，不加则是绕指定的一点旋转：
2016-04-11 17:34:20
3453
原创 HTML5 canvas画布
1、添加canvas元素：2、在javascript中进行绘制：var c=document.getElementById("myCanvas");//通过id寻找canvas元素var cxt=c.getContext("2d");//创建context对象//绘制红色矩形cxt.fillStyle="#FF0000";cxt.fillRect(0,
2016-04-11 17:31:36
496
原创 HTML5 拖动
1、拖动什么：ondragstart="drag(event)"：function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);} //设置被拖数据的类型与值2、放到何处：ondragover="allowDrop(event)":function allowDrop(ev){ev.pr
2016-04-11 17:18:22
451
原创 HTML5 视频
Your browser does not support the video tag. Your browser does not support the video tag.
2016-04-11 17:16:05
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人