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

开始停止

 

 <p>
 <style><!--
 button{
     background-color:#aaaaaa;
     font-family:微软雅黑;
     font-size:12px;
     color:#ffffff;
     width:50px;
     height:30px;
 }
 button:hover{
     background-color:#6482F7;
     color:#ff0000;
 }
 #container{
     background:#9a9a9a;
     width:50%;
     height:280px;
     padding:0px 10px;
     margin:0px;
 }
 div.hbar{
     background-color:#3EA35F;
     margin:5px;
 }
 div.hbar span{
     color:#ffffff;
     font-family:微软雅黑;
     font-size:10px;
     margin-left:10px;
 }
 --></style>
 <button onclick="int=setInterval(myTimer,1000)">开始</button><button onclick="int=window.clearInterval(int)">停止</button>
 <div id="container"></div>
 <p>
 <script type="text/javascript" src="http://files.cnblogs.com/files/alexywt/d3.js"></script>
 <script type="text/javascript">// <![CDATA[
 var data=[10,15,30,50,80,65,55,30,20,10,8];
 function render(){
     d3.select("#container").selectAll("div.hbar").data(data)
         .enter().append("div").attr("class","hbar").append("span");
     d3.select("#container").selectAll("div.hbar").data(data)
         .style("width",function(d){return (d*3)+"px";}).select("span").text(function(d){return d;});
     d3.select("#container").selectAll("div.hbar").data(data)
         .exit().remove();
 }
 function myTimer(){
     data.shift();
     data.push(Math.round(Math.random()*100));
     render(data);
 }
 var int=setInterval(myTimer,1000);
 render(data);
 // ]]></script>
 </p>