源自对于中华人民共和国国家统计局>>中国统计年鉴 下的1996年一个数据的解析，文件名1996.csv，可以在这个https://github.com/gmszone/china/blob/master/data/1996.csv 上面查看到。。

D3 JS 解析CSV

最后效果图如下所示:

关于CSV

逗号分隔值（Comma-Separated Values，CSV，有时也称为字符分隔值，因为分隔字符也可以不是逗号），其文件以纯文本形式存储表格数据（数字和文本）。纯文本意味着该文件是一个字符序列，不含必须象二进制数字那样被解读的数据。CSV文件由任意数目的记录组成，记录间以某种换行符分隔；每条记录由字段组成，字段间的分隔符是其它字符或字符串，最常见的是逗号或制表符

D3 JS

D3的缩写是Data Driven Documents，与Raphaël的关系：

相同点

• 都是用javascript写的针对矢量图的库
• 都可以对DOM节点进行操作，包括绘制，修改，添加动画效果以及图形的交互

不同点

• Raphaël是一个矢量图的API，专注于对矢量图形的操作
• D3是一个数据的API，专注于数据。将数据与网页中的svg元素绑定起来，然后进行一定的操作。比如将一个有5个元素的数组与柱状图表中的5个y坐标值（高度）绑定，然后当数组的数据变化时，柱状图表的高度也会相应的更新

选择D3可以从技术层面上来考虑： - SVG比较于Canvas，可以对于DOM直接操作 - 对比于Raphaël，D3直接对svg元素进行操作性能更好 - D3不兼容老版本的浏览器，而Raphaël兼容

D3 JS CSV解析

下面就是一个简单的d3解析csv的例子:

    var dataset = []
    d3.csv("data.csv", function(data) {

    });

而我们所要做的是解析对于按资金来源和隶属关系分的基本建设投资这类的国家统计项目，这里以地区和中央项目为例，下面是最终代码:

    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
    },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")

    var svg = 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 + ")");

    d3.csv("data/1996.csv", type, function(error, data) {
        x.domain(data.map(function(d) {
            return d["地区"];
        }));
        y.domain([0, d3.max(data, function(d) {
            return d["中央项目"];
        })]);
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("中央项目");

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) {
                return x(d["地区"]);
            })
            .attr("width", x.rangeBand())
            .attr("y", function(d) {
                return y(d["中央项目"]);
            })
            .attr("height", function(d) {
                return height - y(d["中央项目"]);
            });

    });

    function type(d) {
        d["中央项目"] = +d["中央项目"];
        return d;
    }

真正对于数据进行处理的是:

    d3.csv("data/1996.csv", type, function(error, data) {
        x.domain(data.map(function(d) {
            return d["地区"];
        }));
        y.domain([0, d3.max(data, function(d) {
            return d["中央项目"];
        })]);
    });

虽然有着如jquery.csvToTable.js这样的库，但是还是没有d3.js这样以数据为驱动的库来得快。