d3 绘制动态柱状图 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>svg</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <style type="text/css">
            svg{
                background-color: #DDD;
            }
            
            .axis line,.axis path{
                fill:none;
                stroke:black
            }
        </style>
    </head>
    <body>
        
    </body>
    
    <script type="text/javascript">
        // 绘制柱状态
        let width=500,height=500,num=30;
        
        // 定义数据源 学员成绩
        let score=[60,50,80,35,70,40]
        let text=['语文','数学','英语','化学','物理','体育'];
        // 1 创建svg容器
        let svg = d3.select('body').append('svg').attr('width',width).attr('height',height);
        
        // 需要创建g元素 相当于  block  只起到包裹元素作用  方便后期代码维护管理
        let g = svg.append('g').attr('transform',`translate(${num},${num})`)
        
        
        // // 定义比例尺
        // let scaleY = d3.scale.linear().domain([0,d3.max(score)]).range([0,height-num*2])
        let scaleY = d3.scale.linear().domain([0,d3.max(score)]).range([height-num*2,0])
        let scaleX = d3.scale.ordinal().domain(text).rangeRoundBands([0,width-num*2],0.4)

        // 颜色比例尺
        let color = d3.scale.category10(); 
        
        // 往g元素中追加rect矩形（根据数据） 绘制柱状图  
        //ease（）： linear:线性  circle：缓慢  elastic：带有弹跳的到达最终状态   bounce：最后跳动
        // transition:开启动画过度效果
        // duration:指定每个元素的动画持续时间
        // delay:指定每个元素的动画延迟时间
        
        g.selectAll('rect').data(score).enter()
            .append('rect')
            .attr('x',(d,i)=>{return scaleX(text[i])})
            // .attr('y',(d,i)=>{return scaleY(d)})
            .attr('y',(d,i)=>{return height-num*2})
            .attr('width',()=>{return scaleX.rangeBand()})
            // .attr('height',(d,i)=>{return height-num*2-scaleY(d)})
            .attr('height',(d,i)=>{return 0})
            .attr('fill',(d,i)=>{return color(i)})
            .on('mouseover',function(){
                d3.select(this).attr('fill','yellow')
            })
            .on('mouseout',function(d,i){
                d3.select(this).transition().duration(500).attr('fill',()=>{
                    return color(i)
                })
            })
            .transition()
            .duration(1000)
            .delay((d,i)=>{
                return i*400
            })
            .ease('bounce')
            .attr('y',(d,i)=>{return scaleY(d)})
            .attr('height',(d,i)=>{return height-num*2-scaleY(d)})
            
            
            
            
        // 给柱状图添加文本描述
        g.selectAll('text').data(score).enter()
            .append('text')
            .attr('x',(d,i)=>{return scaleX(text[i])})
            .attr('y',(d,i)=>{return height-num*2})
            .attr('dx',(d,i)=>{return 6})
            .attr('dy',(d,i)=>{return -5})
            .text((d,i)=>{return d})
            .attr('fill',(d,i)=>{return color(i)})
            .transition()
            .duration(1000)
            .delay((d,i)=>{
                return i*400
            })
            .ease('bounce')
            .attr('y',(d,i)=>{return scaleY(d)})
            // .attr('height',(d,i)=>{return height-num*2-scaleY(d)})
            
        // 绘制比例尺 axis()  orient() 控制文本在轴的展示方向问题   left right top bottom
        let x = d3.svg.axis().scale(scaleX)
        let y = d3.svg.axis().scale(scaleY).orient('left')
        
        // 追加比例尺
        g.append('g').attr('class','axis').call(x).attr('transform',`translate(0,${height-num*2})`)
        g.append('g').attr('class','axis').call(y)
        

        
    </script>

</html>

 

 

posted @ 2020-11-15 11:48  小不点灬  阅读(651)  评论(0)    收藏  举报