d3.js学习笔记（二）：完整的柱状图示例

本示例采用d3的3.x版本库，示例代码如下：

 d3.fullAxisExample = function()
    {
        var width = 240;
        var height = 240;

        //在 body 里添加一个 SVG 画布	
        if (svg == undefined)
        {
            svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
        }
        

        //画布周边的空白
        var padding = { left: 30, right: 30, top: 20, bottom: 20 };

        //定义一个数组
        var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

        //x轴的比例尺(ordinal表示顺序比例尺，按照数量产生比例尺序号)（本例中横坐标采用数组 序号表示）
        var xScale = d3.scale.ordinal()
            .domain(d3.range(dataset.length))
            .rangeRoundBands([0, width - padding.left - padding.right]);

        //y轴的比例尺   domian表示输入数据的范围，range表示输出数据的范围（本例中Y轴输出范围为0-到指定的画板高度并减去边缘值）
        var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset)])
            .range([height - padding.top - padding.bottom, 0]);

        //定义x轴
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

        //定义y轴
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");

        //矩形之间的空白
        var rectPadding = 4;

        //添加矩形元素说明，说明文字和坐标轴需要对应起来===
        var rects = svg.selectAll(".MyRect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("class", "MyRect")
            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
            .attr("x", function (d, i) {
                return 200+xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                var min = yScale.domain()[0];
                return yScale(min);
                //return yScale(d);

            })
            .attr("width", xScale.rangeBand() - rectPadding)
            .attr("height", function (d) {
                return height - padding.top - padding.bottom - yScale(d);
            }).attr("height", function (d) {
                return 0;
            })
            .transition()
            .delay(function (d, i) {
                return i * 200;
            })
            .duration(2000)
            .ease("bounce")
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("height", function (d) {
                return height - padding.top - padding.bottom - yScale(d);
            });
;

        //添加文字元素
        var texts = svg.selectAll(".MyText")
            .data(dataset)
            .enter()
            .append("text")
            .attr("class", "MyText")
            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")           
            .attr("x", function (d, i) {
                return 200+xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("dx", function () {
                return (xScale.rangeBand() - rectPadding) / 2;
            })
            .attr("dy", function (d) {
                return 20;
            })
            .text(function (d) {
                return d;
            }).transition()
            .delay(function (d, i) {
                return i * 200;
            });

        //添加x轴
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + (200+padding.left) + "," + (height - padding.bottom) + ")")
            .call(xAxis);

        //添加y轴
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" +(200+ padding.left) + "," + padding.top + ")")
            .call(yAxis);

    }