简单的柱形图的实现

首先在d3.js 中 我们要知道几个概念

一个是比例尺

比例尺在d3.js中使用的函数是 d3.scale

在d3.js中又分为两种比例尺

1.线性比例尺

线性比例尺就是连续的数据

 var yScale = d3.scale.linear()                //定义一个线性比例尺
                .domain([0, 10)])              //设置它的定义域
                .range([0,10]);                //设置它的长度

2.序数比例尺

序数比例尺是不连续的数据

 var xScale = d3.scale.ordinal()                //定义一个序数比例尺
             .domain(d3.range(dataset.length))  //设置它的定义域 
             .rangeRoundBands([0, 10]);  //设置它的值域

而另一个就是数轴的概念

 var xAxis = d3.svg.axis()                //定义数轴
               .scale(xScale)             //指定比例尺
               .orient("bottom");         //确定数轴的方向

 

知道这个概念之后我们就可以在页面进行柱状图的构建了

首先我们要在页面上顶一个画布

    var height = 400;                          //设置高度
    var width = 400;                            //设置宽度

    var svg = d3.select("body")               //添加一个画布
        .append("svg")
        .attr("height", height)
        .attr("width", width);

然后定义两个比例尺一个x的一个y的

    var padding = {left: 30, right: 30, top: 20, bottom: 20};

    var dataset = [10, 20, 23, 30, 29, 40, 34, 23, 33];                     //设置数据

    var xScale = d3.scale.ordinal().domain(d3.range(dataset.length))    //设置x轴比例尺
        .rangeRoundBands([0, width - padding.left - padding.right]);

    var yScale = d3.scale.linear().domain([0, d3.max(dataset)])     //设置y轴比例尺
        .range([height - padding.top - padding.bottom, 0]);

接着就是定义x和y数轴

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

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

然后就是讲矩形添加到数轴上

    var rectPadding = 10;

    var rects = svg.selectAll(".MyRect")     //添加矩形文本
        .data(dataset)                    
        .enter()
        .append("rect")
        .attr("class", "MyRect")
        .attr("transform", "translate(" + padding.left + "," + padding.top + ")")   //通过transform下的translate定义矩形的位置x和y的起点位置
        .attr("x", function (d, i) {                              
            return xScale(i) + rectPadding / 2;
        })
        .attr("y", function (d) {                           
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding)
        .attr("y", function (d) {                                           //给矩形添加动画效果
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function (d) {
            return 0;
        })
        .transition()
        .delay(function (d, i) {
            return i * 200;
        })
        .duration(2000)
        .ease("elastic")
        .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 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;
        })
        .attr("y", function (d) {                     //给文字添加动画效果
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function (d) {
            return 0;
        })
        .transition()
        .delay(function (d, i) {
            return i * 200;
        })
        .duration(2000)
        .ease("elastic")
        .attr("y", function (d) {
            return yScale(d);
        });

最后实现

    svg.append("g").attr("class", "axis")
        .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
        .call(xAxis);      //调用函数

    svg.append("g").attr("class", "axis")
        .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
        .call(yAxis);    //调用函数