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 + " -->" + i + " e-->" + (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 + " -->" + i + " e-->" + (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>