麻省理工入学条件 rect:hover { fill: orange; } rect { " />

麻省理工入学条件 rect:hover { fill: orange; } rect {"/>
 首页 > 作文

代码实现柱状图(1)

更新时间:2023-04-03 10:10:27 阅读: 评论:0

代码实现柱状图(1)

<style type="text/css">麻省理工入学条件    rect:hover {        fill: orange;    }    rect {        transition: all 0.2s;        -moz-transition:all 0.3s;         -webkit- transition:all 0.3s;        -moz-transition:all 0.3s;    }    #tooltip{        position: absolute;        width: 200px;        height: auto;        padding: 10px;        background篮球教学视频-color: white;        pointer-events: none;    }    #tooltip.hidden{        display: none;    }    #tooltip p{        margin: 0;        font-family: sans-rif;        font-size: 16px;        line-height: 20px;    }</style><body>    <p id="tooltip" class="hidden">        <p><strong> the value is </strong></p>        <p><span id="value"></span>%</p>    </p></body><script type="text/javascript">var datat=[];for (var i=0;i<30;i++){    var num=Math.round(Math.random()*30);    datat.push(num);}// var datat=[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];h=350;w=800;    var svg=d3.lect("body").append("svg");    svg.attr("height",h)        .attr("width",w);        /*根据数据个数映射到w,平均分配宽度,间距是0.5,*/    var xscale=d3.scale.ordinal()            .domain(d3.range(datat.length))            .rangeRoundBands([0,w],0.1);//ordinal是一个序数比例尺,会根据数据集数量来平均分段,且保存了每段的宽度,        /*将y值映射到0-100*/    var yscale=d3.scale.linear()//当数据类型不是点集的形式,max()下不用嵌套匿名函数            .domain([0,d3.max(datat,function(d){                return d;            })])            .range([5,h]);    svg.lectAll("rect")        .data(datat)        .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) + ")";        })        .on("click",function(d){            console.log(d);        })        .on("mouover",function(d){            var xposition=parFloat(d3.lect(this).attr("x")+xscale.rangeBand/2);            var yposition=parFloat(d3.lect(this).attr("y")/2+h/2);            d3.lect("#tooltip")                .transition()                .duration(500)                .style("left",xposition+"px")                .style("top",yposition+"px")                .lect("#value")                .text(d)            d3.lect("#tooltip").clasd("hidden",fal);        })        .on("mouout",function()困难的用英语怎么说{            d3.lect("#tooltip").clasd("hidden",true);        })        .on("click",function(){            sortBar();        })        // .append("title")        // .text(function(d,i){        //  return "value:"+d;        // })    svg.lectAll("text")        .data(datat)        .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")        .style("pointer-events","none")    /*排序函数*/    var sortorder=true;    var sortBar=function(){        /*重写sort函数*/        sortorder=!sortorder        // var sort=function(a,b){        //  if (sortorder){        //      return d3.ascending(a,b);        //  }        //  el{        //      return d3.descending(a,b);        积分礼//  }        // }        d3.lectAll("rect")            .sort(function(a,b){                if (sortorder){                return d3.ascending(a,b);                }                el{                    return d3.descending(a,b);                }            })            .transition()            .delay(function(d,i){                return i*50;            })            .duration(1000)            .attr("x",function(d,i){                return xscale(i);            })        d3.lectAll("text")            .sort(function(a,b){                    if (sortorder){                    return d3.ascending(a,b);                }                el{                    return d3.descending(a,b);  慢热型              }                })            .transition()            .delay(function(d,i){                return i*50;            })            .duration(1000)            .attr("x",function(d,i){                return xscale(i);            })    }</script>

本文发布于:2023-04-03 10:10:26,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/9389ddeddf52e4d90be635969e933792.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:代码实现柱状图(1).doc

本文 PDF 下载地址:代码实现柱状图(1).pdf

标签:函数   宽度   麻省理工   是一个
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
  • 代码实现柱状图(1)
    代码实现柱状图(1)