之前看了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>
之前对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函数使用。