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>
