代码实现柱状图（2）

代码实现柱状图（2）

<script type="text/javascript">

var dataset=[];
for (var i=0;i<30;i++){
    var num=Math.round(Math.random()*30);
    dataset.push(num);
}
// var dataset=[5,15,25,35,45,12,12,23,65,43,78,33,33,43,12,12,23,65,43,78,33,65,43,78,33,33,43,12];
var h=350;
var w=800;
var maxvalue=80;
    var svg=d3.select("body").append("svg");
    svg.attr("height",h)
        .attr("width",w);
        /*根据数据个数映射到w，平均分配宽度，间距是0.5，*/
    var xscale=d3.scale.ordinal()
            .domain(d3.range(dataset.length))
            .rangeRoundBands([0,w],0.1);//ordinal是一个序数比例尺，会根据数据集数量来平均分段，且保存了每段的宽度，
        /*将y值映射到0-100*/
    var yscale=d3.scale.linear()//当数据类型不是点集的形式，max（）下不用嵌套匿名函数
            .domain([0,d3.max(dataset,function(d){
                return d;
            })])
            .range([5,h]);
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x",function(d,i){
            return xscale(i);
        })
        .attr("y",function(d){
            return (h-yscale(d));
        })
        .attr("height",function(d){
            return yscale(d);
        })
        .attr("width",xscale.rangeBand())
        .attr("fill",function(d){
            return "rgb(0, 0, " + Math.round(d * 10) + ")";
        });
    /*svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x",function(d,i){
            return w*i/dataset.length;
        })
        .attr("width",function(d,i){
            return w/dataset.length-2;
        })
        .attr("height",function(d){
            return d;
        })
        .attr("y",function(d){
            return h-d;//svg中矩形的坐标是左上角到右下角，且只能从上向下长，既然只能从上向下，那么久改变用h-d
        })
        .attr("fill",function(d){
            return "rgb(0,0,"+d*10+")";
        });
        */
    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d){
            return d;
        })
        .attr("x",function(d,i){
            return xscale(i);
        })
        .attr("y",function(d){
            return (h-yscale(d)+12);
        })
        .attr("font-size","10px")
        .attr("fill","white");

    d3.select("button")
        .on("click",function(){

            var dataset=[];
            for (var i=0;i<30;i++){
                var num=Math.round(Math.random()*maxvalue);
                dataset.push(num);
            }
            var xscale=d3.scale.ordinal()
                .domain(d3.range(dataset.length))
                .rangeRoundBands([0,w],0.1);//ordinal是一个序数比例尺，会根据数据集数量来平均分段，且保存了每段的宽度，
        /*将y值映射到0-100*/
            var yscale=d3.scale.linear()//当数据类型不是点集的形式，max（）下不用嵌套匿名函数
                .domain([0,d3.max(dataset,function(d){
                    return d;
                })])
                .range([5,h]);
            svg.selectAll("rect")
                .data(dataset)
                .transition()
                .delay(function(d,i){//每个加载数据延迟
                    return i/dataset.length*2000;
                })
                .duration(5000)
                .ease("linear")
                .attr("x",function(d,i){
                    return xscale(i);
                })
                .attr("y",function(d){
                    return (h-yscale(d));
                })
                .attr("height",function(d){
                    return yscale(d);
                })
                .attr("width",xscale.rangeBand())
                .attr("fill",function(d){
                    return "rgb("+Math.round(d * 10)+",100, 0)";
                });
            svg.selectAll("text")
                .data(dataset)
                .transition()
                .delay(function(d,i){//每个加载数据延迟
                    return i/dataset.length*1000;
                })
                .text(function(d){
                    return d;
                })
                .attr("x",function(d,i){
                    return xscale(i);
                })
                .attr("y",function(d){
                    return (h-yscale(d)+12);
                })
                .attr("font-size","10px")
                .attr("fill","white");

        })

</script>