1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>HelloWorld</title>
5 </head>
6 <body>
7 <p>Hello World 1</p>
8 <p>Hello World 2</p>
9 <!-- <p>Hello World 1</p>
10 <p>Hello World 2</p> -->
11 <div id="con"></div>
12 <div id="chart01"></div>
13 <bottom><button type="button" onclick="myadd()">add</button><button type="button" onclick="mysort()">sort</button></bottom>
14 <script src="./jquery-2.1.4.min.js" charset="utf-8"></script>
15 <script src="./d3.js" charset="utf-8"></script>
16 <script>
17 // var p = d3.select("body").selectAll("p");
18 // // p.datum("Thunder").append("span").text(function(d, i) {
19 // // return d + " " + i;
20 // // });
21
22 // var dataset = [{"id":1, "name":"张三"},
23 // {"id":2, "name":"张三2"},
24 // {"id":3, "name":"张三3"},
25 // {"id":4, "name":"张三4"}];
26 // var update = p.data(dataset);
27
28 // update.text(function(d) {
29 // return d.id + "--" + d.name;
30 // });
31
32 // update.enter().append("p").text(function(d) {
33 // return d.id + "--" + d.name;
34 // });
35
36 // var condiv = d3.select(document.getElementById("con"));
37
38 // condiv.selectAll("span").data(dataset).enter().append("span").text(function(d) {
39 // return d.id + "---" + d.name;
40 // });
41
42 // var numbers = [12, 23, 25, 67, 5, 26, 19, 8];
43 // console.log(d3.min(numbers, function(d) {return d * 3;}));
44 // console.log(d3.max(numbers));
45 // console.log(d3.extent(numbers, function(d) {
46 // return d % 3;
47 // }));
48 // console.log(d3.sum(numbers));
49
50 // console.log(d3.mean(numbers));
51
52 // console.log(d3.median(numbers));
53 // console.log(numbers.sort(d3.ascendind));
54 // console.log(d3.quantile(numbers, 19.0));
55 // p.data(dataset, function(d) {return d.id;}).text(function(d) {
56 // return d.id + " " + d.name;
57 // });
58 // console.log(update);
59 // console.log(update.enter());
60 // console.log(update.exit());
61
62 // console.log(p);
63 var dataset = [30, 45, 23, 69, 160, 55, 99];
64 var chart01 = d3.select(document.getElementById("chart01"));
65 var width = 800;
66 var height = 400;
67 var padding = {"top": 20, "right": 20, "left": 20, "bottom": 20};
68 var rectStep = 55;
69 var rectWidth = 45;
70
71 var svg = chart01
72 .append("svg")
73 .attr("width", width)
74 .attr("height", height);
75
76 var rect = svg.selectAll("rect")
77 .data(dataset)
78 .enter()
79 .append("rect")
80 .attr("fill", "steelblue")
81 .attr("x", function(d, i) {
82 return padding.left + i * rectStep;
83 })
84 .attr("y", function(d) {
85 return height - padding.bottom - d;
86 })
87 .attr("width", rectWidth)
88 .attr("height", function(d) {
89 return d;
90 });
91
92 var text = svg.selectAll("text")
93 .data(dataset)
94 .enter()
95 .append("text")
96 .attr("text-anchor", "middle")
97 .attr("fill", "white")
98 .attr("x", function(d, i) {
99 return padding.left + i * rectStep;
100 })
101 .attr("y", function(d) {
102 return height - padding.bottom - d;
103 })
104 .attr("width", rectWidth)
105 .attr("height", function(d) {
106 return d;
107 })
108 .attr("dx", rectWidth/2)
109 .attr("dy", "1em")
110 .text(function(d) {
111 return d;
112 });
113
114 function redraw(dataset) {
115 var updateRect = svg.selectAll("rect").data(dataset);
116 var enterRect = updateRect.enter();
117 var exitRect = updateRect.exit();
118
119 var updateText = svg.selectAll("text").data(dataset);
120 var enterText = updateText.enter();
121 var exitText = updateText.exit();
122
123 updateRect.attr("fill", "steelblue")
124 .attr("x", function(d, i) {
125 return padding.left + i * rectStep;
126 })
127 .attr("y", function(d) {
128 return height - padding.bottom - d;
129 })
130 .attr("width", rectWidth)
131 .attr("height", function(d) {
132 return d;
133 });
134
135 enterRect.append("rect")
136 .attr("fill", "steelblue")
137 .attr("x", function(d, i) {
138 return padding.left + i * rectStep;
139 })
140 .attr("y", function(d) {
141 return height - padding.bottom - d;
142 })
143 .attr("width", rectWidth)
144 .attr("height", function(d) {
145 return d;
146 });
147
148 exitRect.remove();
149
150 updateText.attr("text-anchor", "middle")
151 .attr("fill", "white")
152 .attr("x", function(d, i) {
153 console.log("de-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));
154 return padding.left + i * rectStep;
155 })
156 .attr("y", function(d) {
157 return height - padding.bottom - d;
158 })
159 .attr("width", rectWidth)
160 .attr("height", function(d) {
161 return d;
162 })
163 .attr("dx", rectWidth/2)
164 .attr("dy", "1em")
165 .text(function(d) {
166 return d;
167 });
168
169 enterText.append("text")
170 .attr("text-anchor", "middle")
171 .attr("fill", "white")
172 .attr("x", function(d, i) {
173
174 console.log("d-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));
175 return padding.left + i * rectStep;
176 })
177 .attr("y", function(d) {
178 return height - padding.bottom - d;
179 })
180 .attr("width", rectWidth)
181 .attr("height", function(d) {
182 return d;
183 })
184 .attr("dx", rectWidth/2)
185 .attr("dy", "1em")
186 .text(function(d) {
187 return d;
188 });
189
190 exitText.remove();
191 }
192
193 function myadd() {
194 dataset.push(Math.floor(Math.random() * 100));
195 console.log(dataset);
196 redraw(dataset);
197 }
198
199 function mysort() {
200 dataset.sort(d3.ascending);
201 redraw(dataset);
202 }
203 </script>
204 </body>
205 </html>
时间： 2024-08-01 17:55:13