D3.js-数值自动变动的条形图表

 

 1 <p>
 2 <style><!--
 3 button{
 4     background-color:#aaaaaa;
 5     font-family:微软雅黑;
 6     font-size:12px;
 7     color:#ffffff;
 8     width:50px;
 9     height:30px;
10 }
11 button:hover{
12     background-color:#6482F7;
13     color:#ff0000;
14 }
15 #container{
16     background:#9a9a9a;
17     width:50%;
18     height:280px;
19     padding:0px 10px;
20     margin:0px;
21 }
22 div.hbar{
23     background-color:#3EA35F;
24     margin:5px;
25 }
26 div.hbar span{
27     color:#ffffff;
28     font-family:微软雅黑;
29     font-size:10px;
30     margin-left:10px;
31 }
32 --></style>
33 <button onclick="int=setInterval(myTimer,1000)">开始</button><button onclick="int=window.clearInterval(int)">停止</button>
34 <div id="container"></div>
35 <p>
36 <script type="text/javascript" src="https://files.cnblogs.com/files/alexywt/d3.js"></script>
37 <script type="text/javascript">// <![CDATA[
38 var data=[10,15,30,50,80,65,55,30,20,10,8];
39 function render(){
40     d3.select("#container").selectAll("div.hbar").data(data)
41         .enter().append("div").attr("class","hbar").append("span");
42     d3.select("#container").selectAll("div.hbar").data(data)
43         .style("width",function(d){return (d*3)+"px";}).select("span").text(function(d){return d;});
44     d3.select("#container").selectAll("div.hbar").data(data)
45         .exit().remove();
46 }
47 function myTimer(){
48     data.shift();
49     data.push(Math.round(Math.random()*100));
50     render(data);
51 }
52 var int=setInterval(myTimer,1000);
53 render(data);
54 // ]]></script>
55 </p>

 

posted @ 2016-01-07 13:27  alexywt  阅读(735)  评论(0编辑  收藏  举报