d3 绘制散点图

之前看了angularjs，又看了看d3 on angularjs这本书，本来打算使用angularjs，结果把npm玩坏了，现在都没修好，只好先单独用d3绘制了。

先贴代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>d3</title>
 6     <script src="d3-master/d3.min.js" charset="utf-8"></script>
 7     <link rel="stylesheet" href="css/mycss.css">
 8     <!--script src="js/demo.js" type="javascript"></script-->
 9 </head>
10 <body>
11     <script type="text/javascript">
12         var myData = [
13             [10,20], [100,200]
14         ];
15         var w = 200;
16         var h = 300;
17         d3.select("body").append("svg").attr("width",w).attr("height",h).selectAll("circle").data(myData).enter().append("circle")
18                 .attr("cx",function(d){
19                     return d[0];
20                 })
21                 .attr("cy",function(d){
22                     return d[1];
23                 })
24                 .attr("r",10);
25         window.onload = function(){
26             var add = document.getElementById("add");
27             add.onclick = function(){
28                 var cx = document.getElementById("cx");
29                 var cy = document.getElementById("cy");
30                 var valueCx = parseInt(cx.value);
31                 var valueCy = parseInt(cy.value);
32 
33                 myData.push([valueCx,valueCy]);
34                 d3.select("svg").selectAll("circle").data(myData).enter().append("circle")
35                         .attr("cx",function(d){
36                             return d[0];
37                         })
38                         .attr("cy",function(d){
39                             return d[1];
40                         })
41                         .attr("r",10);
42 
43             }
44         }
45     </script>
46     <form>
47         <input type="text" name="cx" id="cx"/>
48         <input type="text" name="cy" id="cy"/>
49         <button type="button" id="add">add</button>
50     </form>
51 </body>
52 </html>

View Code

之前对jQuery有一些了解，看到代码就知道d3和jQuery的设计模式是差不多的。

d3将tag当成selector，使用.data函数将每一个数据和使用select或者selectAll函数选出的tag绑定起来。

attr函数和jQuery相似，第一个参数是需要改变的样式的名称，第二个参数是需要改变的值。第二个参数可以是一个回调，函数原型有两个参数，第一个是绑定的数组data的其中一个元素，第二个是选出selector的下标。

下面重点提一提enter()，append()函数以及exit()，remove()函数。

在绑定的data数量大于所选的selector数量的时候，enter会创建一些新的空的selector，然后配合append函数使用。

比如说如下代码（来自d3 on angularjs）：

d3.select('body').selectAll('.bar').data([18,4,7]) .enter().append('div')
.attr('class', 'bar')
.style('width', function(d){ return d + '%'; });
d3.select('body').selectAll('.bar').data([18,4,8,11]) .enter().append('div')
.attr('class', 'bar')
.style('width', function(d){ return d + '%'; });

在第二行代码中，绑定的数组变化了，比之前多了1一个元素，有一个元素和前面不一样。但是第二行代码运行之后，第三个div的width仍然是7%，然后与之前相比，增加了一个width为11%的div。

.exit()在所绑定的data数量大于所选的selector数量的时候，会“删除”一些数据，配合remove函数使用。