之前看了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函数使用。
时间： 2024-10-25 06:30:10