流程
关于流程，是从项目启动到发布的过程。在前端通常我们都做些什么？
最近在做性能有关的数据上报，发现了两个非常有意思的东西：Chrome 开发者工具的 Timeline 分析面板，以及 DOMContentLoaded 事件。一个是强大的令人发指的性能分析工具，一个是重要的性能指标，于是就用 Timeline 对 DOMContentLoaded 事件进行了一番研究。
-
用 d3.js 实现基于 SVG 的柱状图 5
之前用 6 步实现了基于 SVG 的折线图，这一篇文章将回到比折线图更基本的图表——柱状图。
本篇直接从创建 SVG 讲起，引入 d3 等简单的准备工作参见用 d3.js 实现基于 SVG 的线形图。
step1：模拟数据
12345// 模拟100条0-100的随机数，作为柱状图的高度var data = Array.apply(0, Array(100)).map(function() {return Math.random() * 100;});<!--more-->step2：创建 SVG 容器
12345678910var margin = {top: 20, right: 20, bottom: 30, left: 50},width = document.body.clientWidth - margin.left - margin.right,height = 500 - margin.top - margin.bottom;var chart = d3.select('body').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');这里的代码就不解释了，前一篇文章已经详细说明。chart 就是最终建立的容器，下面就往容器里面放元素。
step3：画柱状图
1234567891011121314151617181920212223// 计算每根柱状物体的宽度var barWidth = width / data.length;// 用g作每根柱状物体的容器，意义可类比div// 前一篇文章已经介绍过selectAll的意义，即生成占位符，等待填充svg图形var bar = chart.selectAll('g').data(data).enter().append('g')// 接收一个数据填充一个g元素// 同时为g设置位置.attr('transform', function(d, i) {return 'translate(' + i * barWidth + ', 0)';});bar.append('rect')// 添加一个矩形.attr('y', function(d) {return height - d;}).attr('height', function(d) {return d;}).attr('width', barWidth - 1);前文提到 svg 的元素定位都是基于整个 svg 容器左上角作为原点，但并不能使用 position: absolute 等方法定位，此处的 g 元素通过位移来定位 x 坐标，即 transform: translate(x, 0)。
这里的 bar 可类比 jQuery 对象，是一个类数组对象，bar 调用的方法都会对 bar 里面每个对象进行调用。代码中每一次调用都插入一个矩形，同时设置 y 坐标、高度和宽度，x 坐标跟父容器（g）保持一致即可。这里需要注意 y 坐标往下为正，为了让所有矩形的下边处于同一高度，这里设置每个矩形的 y 坐标为容器高度减去矩形高度。为了用一像素区分开每个矩形，这里设置矩形宽度为父容器的宽度减 1。
通过以上 js 代码再稍微设置一点 css
123rect {fill: #2177BB;}即可看到一张最简单的柱状图了。
step4：添加坐标轴
12345678910111213141516171819var y = d3.scale.linear().domain([0, d3.max(data)]).range([height, 0]);var xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(1);var yAxis = d3.svg.axis().scale(y).orient('left');// 添加x坐标轴chart.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis);// 添加y坐标轴chart.append('g').attr('class', 'y axis').call(yAxis);完整的柱状图就是这样了
完整的代码请移步 jsFiddle
由于篇幅关系，本篇文章就暂时只介绍最基本的柱状图是怎么完成的，后续会更新动态柱状图以及为柱状图添加交互系效果的实现方法，敬请期待！
-
grunt 快速学习小记
In Web开发 on 2014年02月27日 by TAT.dorsywang view: 11,7985
-
JX.Animate 基于 HTML5&CSS3 的 JavaScript 并行动画库
3
What’s JX.Animate
JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 JavaScript 的 CSS3 动画库，通过 JX 插件的形式提供。- JX.Animate 官网：http://alloyteam.github.io/JXAnimate/
JX.Animate 可以帮助开发者在 JavaScript 代码中方便调用和控制 CSS3 动画，例如动画时长、重复次数、动画缓冲、结束回调等，并且支持播放声音。
-
AlloyStick——专为 HTML5 开发的开源骨骼动画引擎
14
What's AlloyStick
AlloyStick 是一款专为 HTML5 开发的 2D 骨骼动画引擎。可以用于 HTML5 动画开发、HTML5 游戏开发。AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成。骨骼动画编辑器提供强大的骨骼动画编辑功能，拖拽骨骼组合角色，通过设置动画关键帧，输出动画数据。js 动画库根据输出数据，依靠强大的自动补间和骨骼关系，就可以制作出逼真、生动的 Canvas 骨骼动画，可以畅快的运行在 PC、手机、平板等设备里。
-
Browser-Sync：响应式 Web 开发调试利器
8
快速的移动 Web 开发模式，是我们团队一直在探索的一项内容。今天给大家介绍一种高效的开发方式，在开始内容前，我们先了解与分析一下目前主流开发模式的现状（本文聚焦响应式 Web 开发，这里主要指页面重构的工作）。
-
腾讯移动 Web 整体解决方案 – Spirit
30
移动 Web 开发是一块新的领域，给 Web 带来更多机会的同时，也带来了更多的挑战。为了让开发者在移动 Web 的道路上走得更加顺畅，开发更加高效，Spirit（勇气号）由此而生。
Spirit 官网：http://alloyteam.github.io/Spirit/
