前端很多项目中，都有文件下载的需求，特别是 JS 生成文件内容，然后让浏览器执行下载操作（例如在线图片编辑、在线代码编辑、iPresst 等）。
但受限于浏览器，很多情况下我们都只能给出个链接，让用户点击打开-》另存为。如下面这个链接：
<a href="file.js">file.js</a>
用户点击这个链接的时候，浏览器会打开并显示链接指向的文件内容，显然，这并没有实现我们的需求。
废话不说，直接正题吧。
最近项目有个需求要用 js 计算一串字符串写入到 localStorage 里所占的内存，众所周知的，js 是使用 Unicode 编码的。而 Unicode 的实现有 N 种，其中用的最多的就是 UTF-8 和 UTF-16。因此本文只对这两种编码进行讨论。
下面这个定义摘自维基百科（http://zh.wikipedia.org/zh-cn/UTF-8），做了部分删减。
UTF-8（8-bit Unicode Transformation Format）是一种针对 Unicode 的可变长度字符编码，可以表示 Unicode 标准中的任何字符，且其编码中的第一个字节仍与 ASCII 相容，使用一至四个字节为每个字符编码
D3 全称 Data-Driven-Documents，这里说的不是暗黑 III，d3 是一款可视化 js 库，其主要用途是用 HTML 或者 SVG 生动地展现数据。
相信网站开发者大都接入过 ga 来分析各种数据，例如 pv 图。ga 的图都是基于 SVG 的，下面笔者就用 d3 来一步一步实现类似 ga 的 pv 线形图，并假设读者具有一定的 SVG 基础（没有？没关系，w3school 帮你快速上手）。
到 github d3 下载最新版 d3，然后在 html 代码增加标签
|
1 2 |
<script src="path/to/d3.js"></script> <!--more--> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = document.body.clientWidth - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var container = d3.select('body') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); var svg = container.append('g') .attr('class', 'content') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); |
margin、width、height 定义了 svg 节点的位置和尺寸，后面会用到。d3.select 类似 jquery 的选择器，并且 d3 的语法也支持串联调用，append('svg') 将 svg 追加到 body 的尾部，同时为 svg 节点设置了宽度和高度值，attr 也有 get 和 set 两种用法。
svg 的 g 元素类似于 div，在这里作为一组元素的容器，后面加入的元素都放在 g 里面，g 可以设置统一的 css，里面的子元素会继承可继承 css 属性。margin 和 position 对 g 的定位不起作用，只能使用 translate 通过位移来定位。
既然 d3 是数据驱动的，那必须要有数据啊，没有数据肿么能搞呢。好吧，首先模拟一份数据，就模拟本月的 pv 数据吧，即 12 月每天的 pv 数据，日期采用 yy-mm-dd 的格式，pv 随机一个 100 以内的整
