代码实现柱状图（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 条评论） |
