陈建华的博客
专注web开发
发布时间 : 2014-11-21 11:51:31     Tags : javascript

js数组求和,相信大家多数都是进行循环求和。但是这种方法,资源开销比较大,效率比较低。今天想了想,发现了一个好办法。在此分享一下。首先我们创建一个数组a,数组的长度是10万;var a = new Array();for(var i=0;i<100000;i++){ a.push(i*12);}然后我们用普通的循环求和,记录一下开始时间和结束时间;执行结果为我们可以看到,普通循环的方式,用时是196毫秒。console.info(new Date().getTime());var x=0;for(var i=0;i<a.length;i++){ x +=a[i];}console.

发布时间 : 2014-09-26 11:05:18     Tags : javascript

Firefox扩展开发: Hello World!今天尝试开发一个Firefox的扩展。虽然比较简单,网上也有很多教程,但是感觉一些教程写的比较麻烦,在初步的开发过程中并没有用到那些东西,于是自己把开发过程记录下来。我是根据Mozilla官方教程开发的,有兴趣的朋友可以自己去看看:https://developer.mozilla.org/en/Building_an_Extension。按照一般的教程,第一个程序都是使用最简单的Hello World,现在我们就制作一个Firefox的Hello World扩展。开发Firefox插件并没有看上去的那样复杂,仅仅使用XML和JavaScrip

发布时间 : 2014-09-23 11:47:03     Tags : javascript

Api参考此文档翻译自 API Reference (英语),版本为 2013-9-9 。不能保证文档的同步更新,因此,需要了解最新的开发特性,请移步英文版 API 参考 。d3 库所提供的所有 API 都在 d3 命名空间下。d3 库使用语义版本命名法(semantic versioning)。 你可以用 d3.version 查看当前的版本信息。d3 (核心部分)选择集d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文档中选择多项元素。selection.attr - 设置或获取指定属性。selection.classed - 添加或删除选定元素的

发布时间 : 2014-09-17 11:01:25     Tags : javascript

D3全称Data-Driven-Documents,这里说的不是暗黑 III,d3是一款可视化js库,其主要用途是用HTML或者SVG生动地展现数据。相信网站开发者大都接入过ga来分析各种数据,例如pv图。ga的图都是基于SVG的,下面笔者就用d3来一步一步实现类似ga的pv线形图,并假设读者具有一定的SVG基础(没有?没关系,w3school帮你快速上手)。step1:引入d3.js到github d3下载最新版d3,然后在html代码增加标签<script src="path/to/d3.js"></script><span id="more-5049"></span>step2:创建SV

发布时间 : 2014-09-17 09:59:54     Tags : javascript

D3.js以其强大的绘图能力而闻名,今天我们就来用他绘制一个饼图,先来看一下效果图:下面是实现这个饼图的代码:<!DOCTYPE html><html><head><meta charset="utf-8"><title>testD3-20-pie.html</title><script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script><style type="text/css"></style></head><body> <script type="text/javascript">

发布时间 : 2014-09-16 17:41:09     Tags : javascript

这一次我们继续完成带缩略图拖拽查看的面积图。我们要完成的是拖拽查看的部分。面积图强调数量随时间而变化的程度,是非常常用的可视化图表最终demo http://www.d3js.cn/demo/brush.html 在开始学习时建议大家先熟悉下图表的交互方式 效果图: 要制作拖拽缩略查看的效果,我们首先要了解d3js的brush对象。可以把这个叫做拖拽刷子https://github.com/mbostock/d3/wiki/SVG-Controls#wiki-brush # d3.svg.brush()要使用brush对象的时候,必须先用这个来创建一个brush对象。# brush.x([s

发布时间 : 2014-09-16 17:38:44     Tags : javascript

这一次我们要做一个实用性比较强的图表:带缩略图拖拽查看的面积图。面积图强调数量随时间而变化的程度,是非常常用的可视化图表最终demo http://www.d3js.cn/demo/brush.html本次的demo http://www.d3js.cn/demo/brush2.html 首先我们观察下效果图 上面的效果图是由两个面积图组成的。我们首先要绘制出这两个静态的图表,然后根据d3js提供的强大工具来制作缩略拖拽查看的效果.首先定义好图表尺寸var margin = {top: 10, right: 10, bottom: 100, left: 40}, //上图位置 mar

发布时间 : 2014-09-16 17:24:42     Tags : javascript

今天算是复习教程,复习一下之前学到的transition变换效果,及d3.scale.linear(),domain(),range()几个方法。不过我们会使用一个新的api:axisdemohttp://www.d3js.cn/demo/bar7.htmlhttp://www.d3js.cn/demo/bar8.html首先这是一个散点图 那么我们需要在绘制的时候,使用svg的circle标签绘制圆形。<svg width="50" height="50"><circle cx="25" cy="25" r="25" fill="purple" /></svg>注意circle标签的属性 c

发布时间 : 2014-09-16 16:57:06     Tags : javascript

对于我来说,当初让我决心学习D3的原因,不是D3.js的各种图表,因为市面上成熟的js图表库实在是太多,D3js最吸引我的是各种动态的可视化效果及一些强大的图形算法。今天接着上一篇教程Learning D3.js(1) 学习制作一个柱形图/直方图 继续来讲解图表的绘制,不同的是,我们将引入动态的方式来展现图表。demo:http://www.d3js.cn/demo/bar5.htmlhttp://www.d3js.cn/demo/bar6.html原文 http://mbostock.github.com/d3/tutorial/bar-2.html 因为会涉及一些javascript知

发布时间 : 2014-09-16 16:32:21     Tags : javascript

数据可视化是个热门话题,而D3.js则是前端数据可视化的超级工具。俺作为一个前端,有志于推动D3.js在中国的发展。。但是中文网络上关于D3.js的资料比较少,因此本系列教程将会以翻译外文D3教程及我个人撰写的形式来进行。不过虽然是翻译,但肯定不会照着抄,我会加入很多自己的理解。也希望大家学习的时候,多看d3.js的api与实例 https://github.com/mbostock/d3/wiki/API-Reference然后呢,俺翻译完后,会注明各种链接。俺的原创文章若有参考,也会注明链接。也同样请同行们注意所有文章都欢迎转载分享,但是请注明好转载链接。不要因为自己一些个人的小

微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航