1var max_width = window.innerWidth 2document.getElementById("story_table").style['max-width'] = max_width - 900 + "px" 3 4var svg_map_2 = d3.select("#clickable_1") 5 .append("svg") 6 .attr("viewBox", "0 0 " + 700 + " " + 700) 7 .attr("preserveAspectRatio", "xMinYMin") 8 // .attr("width", width + margin) 9 // .attr("height", height + margin) 10 // .attr('fill', 'black') 11 .append('g') 12 .attr('class', 'map'); 13 14var svg_map_3 = d3.select("#map") 15 .append("svg") 16 // .call(d3.zoom() 17 // .scaleExtent([1, 4]) 18 // .translateExtent([ 19 // [0, 0], 20 // [700, 680] 21 // ]) 22 // .on("zoom", function() { 23 // var svg_map_3 = d3.select("#map") 24 // .attr("transform", d3.event.transform) 25 // })) 26 .attr("viewBox", "0 0 " + 700 + " " + 700) 27 .attr("preserveAspectRatio", "xMinYMin") 28 // .attr("width", width + margin) 29 // .attr("height", height + margin) 30 // .attr('fill', 'black') 31 .append('g') 32 .attr('class', 'map'); 33 34var layer1 = svg_map_3.append('g'); 35var layer2 = svg_map_3.append('g'); 36var layer3 = svg_map_3.append('g'); 37 38 39//设置å°å¾æ å°æ¹å¼ 40var projection_large = d3.geoMercator() 41 .center([118.7789, 32.065]) 42 .scale(30000) 43 // .translate([width / 2, height / 2]); 44 45var projection_small = d3.geoMercator() 46 .center([118.8089, 32.065]) 47 .scale(300000) 48 // .translate([width / 2, height / 2]); 49 50 51var tooltip = d3.select("body").append("div") 52 .attr("class", "tooltip") 53 .style("opacity", 0); 54 55var sights_tooltip = d3.select("body").append("div") 56 .attr("class", "tooltip") 57 .style("opacity", 0); 58 59 60 61function draw_large_city(geo_data) { 62 // "use strict"; 63 var margin = 30, 64 // width = $(window).width() / 2.5 - margin, 65 width = 700 - margin, 66 height = 700 - margin; 67 68 svg_map_2 69 .append("svg") 70 .attr("viewBox", "0 0 " + width + " " + height) 71 .attr("preserveAspectRatio", "xMinYMin") 72 // .attr("width", width + margin) 73 // .attr("height", height + margin) 74 // .attr('fill', 'black') 75 .append('g') 76 .attr('class', 'map'); 77 78 //çæä¸ä¸ªæ¸åçdefs 79 // var gradient = svg_map_2.append("defs") 80 // .append("radialGradient") 81 // .attr("id", "grad1") 82 // .attr("cx", "50%") 83 // .attr("cy", "50%") 84 // .attr("r", "50%") 85 // .attr("fx", "50%") 86 // .attr("fy", "50%") 87 88 // gradient 89 // .append("stop") 90 // .attr("offset", "20%") 91 // .style("stop-color", "blue") 92 93 94 // gradient 95 // .append("stop") 96 // .attr("offset", "100%") 97 // .style("stop-color", "rgb(43, 43, 43)") 98 99 100 var tooltip = d3.select("body").append("div") 101 .attr("class", "tooltip") 102 .style("opacity", 0); 103 104 var sights_tooltip = d3.select("body").append("div") 105 .attr("class", "tooltip") 106 .style("opacity", 0); 107 108 //debugger 109 //æ¥çæ°æ®æ¯å¦load好; 110 var path = d3.geoPath().projection(projection_large); 111 112 var map = svg_map_2.selectAll('path') 113 .data(geo_data.features) 114 .enter() 115 .append('path') 116 .attr('d', path) 117 .attr('fill', 'transparent') 118 .attr('stroke', "white") 119 .attr('stroke-width', 0.15) 120 .attr('stroke-opacity', 0.6); 121 122}; 123// d3.json("data/nanjing.json", draw_large_city); 124 125function draw_polygon_city(polygon_data) { 126 var path = d3.geoPath().projection(projection_large); 127 svg_map_2.selectAll('path') 128 .data(polygon_data.features) 129 .enter() 130 .append('path') 131 .attr('d', path) 132 .attr('fill', 'brown') 133 .attr('opacity', 1) 134 .attr('stroke', "white") 135 .attr('stroke-width', 1) 136 .attr('stroke-opacity', 0.6); 137}; 138 139// d3.json("data/anquanqu.json", draw_polygon_city); 140 141function draw(geo_data) { 142 // "use strict"; 143 var margin = 30, 144 // width = $(window).width() / 2.5 - margin, 145 width = 800 - margin, 146 height = 800 - margin; 147 148 svg_map_3 149 .append("svg") 150 .attr("viewBox", "0 0 " + width + " " + height) 151 .attr("preserveAspectRatio", "xMinYMin") 152 // .attr("width", width + margin) 153 // .attr("height", height + margin) 154 // .attr('fill', 'black') 155 .append('g') 156 .attr('class', 'map'); 157 158 //çæä¸ä¸ªæ¸åçdefs 159 var gradient = svg_map_3.append("defs") 160 .append("radialGradient") 161 .attr("id", "grad1") 162 .attr("cx", "50%") 163 .attr("cy", "50%") 164 .attr("r", "50%") 165 .attr("fx", "50%") 166 .attr("fy", "50%") 167 168 gradient 169 .append("stop") 170 .attr("offset", "20%") 171 .style("stop-color", "#A13924") 172 173 174 gradient 175 .append("stop") 176 .attr("offset", "100%") 177 .style("stop-color", "rgb(43, 43, 43)") 178 179 180 var gradient_2 = svg_map_3.append("defs") 181 .append("radialGradient") 182 .attr("id", "grad2") 183 .attr("cx", "50%") 184 .attr("cy", "50%") 185 .attr("r", "50%") 186 .attr("fx", "50%") 187 .attr("fy", "50%") 188 189 gradient_2 190 .append("stop") 191 .attr("offset", "20%") 192 .style("stop-color", "#FCFCFC") 193 194 195 gradient_2 196 .append("stop") 197 .attr("offset", "100%") 198 .style("stop-color", "rgb(43, 43, 43)") 199 200 var tooltip = d3.select("body").append("div") 201 .attr("class", "tooltip") 202 .style("opacity", 0); 203 204 var sights_tooltip = d3.select("body").append("div") 205 .attr("class", "tooltip") 206 .style("opacity", 0); 207 208 //debugger 209 //æ¥çæ°æ®æ¯å¦load好; 210 var path = d3.geoPath().projection(projection_small); 211 212 var map = svg_map_3.selectAll('path') 213 .data(geo_data.features) 214 .enter() 215 .append('path') 216 .attr('d', path) 217 .attr('fill', 'transparent') 218 .attr('stroke', "white") 219 .attr('stroke-width', 0.3) 220 .attr('stroke-opacity', 0.5); 221 222 //debugger; 223 //å°å°æ®µå°æ®µçpathæç §ååéåï¼keyæ¯è·¯å 224 // var nested = d3.nest() 225 // .key(function(d) { 226 // return d.properties.name 227 // }) 228 // .entries(geo_data.features); 229 230 // streets = nested.filter(street => 231 // street.key == "ä¸å±±è·¯" || 232 // street.key == "西康路" || 233 // street.key == "ä¸å±±åè·¯" || 234 // street.key == "æ±ä¸è·¯" || 235 // street.key == "é¢åè·¯" 236 // ); 237 // counter = [0, 1, 2, 3, 4]; 238 239 240 // for (var i in counter) { 241 // var certain_path = svg_map_2.selectAll('path streets') 242 // .data(streets[i].values) 243 // .enter() 244 // .append("path") 245 // .attr("class", "streets street_" + i) 246 // .attr('d', path) 247 // .attr('fill', 'transparent') 248 // .attr('stroke', 'white') 249 // .attr('stroke-width', '3') 250 // .attr('stroke-opacity', '1') 251 // .on("mouseover", function(d) { 252 // //éå®éè·¯åºç°tooltip 253 // tooltip.transition() 254 // .duration(200) 255 // .style("opacity", 0.9); 256 // if (d.properties.name == '西康路') { 257 // tooltip.html('<strong >西康路</strong><br>æè´') 258 // .style("left", (d3.event.pageX) + "px") 259 // .style("top", (d3.event.pageY - 28) + "px"); 260 // } else if (d.properties.name == 'ä¸å±±åè·¯') { 261 // tooltip.html('<strong >ä¸å±±åè·¯</strong><br>æè´<br>') 262 // .style("left", (d3.event.pageX) + "px") 263 // .style("top", (d3.event.pageY - 28) + "px"); 264 // } else if (d.properties.name == 'ä¸å±±è·¯') { 265 // tooltip.html('<strong >ä¸å±±è·¯</strong><br>æè´') 266 // .style("left", (d3.event.pageX) + "px") 267 // .style("top", (d3.event.pageY - 28) + "px"); 268 // } else if (d.properties.name == 'æ±ä¸è·¯') { 269 // tooltip.html('<strong >' + d.properties.name + '</strong>' + '<br>haha' + d.properties.history) 270 // .style("left", (d3.event.pageX) + "px") 271 // .style("top", (d3.event.pageY - 28) + "px"); 272 // } 273 // //éå®çéè·¯åè² 274 // d3.selectAll("." + this.className.baseVal.substring(8)) 275 // .attr('stroke', 'white') 276 // .attr('stroke-width', '7') 277 // .attr('stroke-opacity', '1') 278 279 // }) 280 // .on("mouseout", function(d) { 281 // // infobox.transition() 282 // // .duration(500) 283 // // .style("opacity", 0); 284 // tooltip.transition() 285 // .duration(500) 286 // .style("opacity", 0); 287 // //debugger; 288 // d3.selectAll('.streets') 289 // .attr('stroke', 'white') 290 // .attr('stroke-width', '3') 291 // .attr('stroke-opacity', '1') 292 // }); 293 294 // //å®ç°çº¿æ¡çå¨æå è½½ 295 // /* certain_path 296 // .attr("stroke-dasharray", 50 + " " + 5) 297 // .attr("stroke-dashoffset", 45) 298 // .transition() // Call Transition Method 299 // .duration(1000) // Set Duration timing (ms) 300 // .ease('linear') // Set Easing option 301 // .attr("stroke-dashoffset", 0); */ 302 // } 303 304 //projectionå次设å®åï¼å¯ä»¥ç»ä¸ªåæ£æ¥è½ç¹; æç¨äºæ·»å æ¯ç¹ãå°æ ç 305}; 306 307d3.json("data/labei.json", draw); 308 309 310function draw_polygon(polygon_data) { 311 var path = d3.geoPath().projection(projection_small); 312 313 layer1.selectAll('path') 314 .data(polygon_data.features) 315 .enter() 316 .append('path') 317 .attr('d', path) 318 .attr('fill', 'white') 319 .attr('opacity', 0.2) 320 .attr('stroke', "white") 321 .attr('stroke-width', 1) 322 .attr('stroke-opacity', 1); 323}; 324 325d3.json("data/anquanqu.json", draw_polygon); 326 327 328 329 330//ä¸é¢æ¯ç»æ£ç¹ç 331 332//å¯ä»¥æé¾æ°è¥åå ¶ä»sightsåå¼ï¼ä¸¤æ¬¡append 333 334 335function draw_refugee(refugee_data) { 336 var sights = layer3 337 .selectAll("circle") 338 .data(refugee_data) 339 .enter() 340 .append('circle') 341 .attr('cx', function(d) { 342 return projection_small(d.coordinate)[0] 343 }) 344 .attr('cy', function(d) { 345 return projection_small(d.coordinate)[1] 346 }) 347 .attr('fill', "url(#grad2)") 348 //"url(#grad2)" 349 .attr('opacity', 0.9) 350 .attr("r", function(d) { 351 return d.value + 4 352 }) 353 // .attr('stroke', '#505ab5') 354 // .attr('stroke-opacity', '1') 355 // .attr('stroke-width', '3') 356 .on("mouseover", function(d) { 357 // debugger; 358 sights_tooltip.transition() 359 .duration(200) 360 .style("opacity", 0.9); 361 sights_tooltip.html('<strong>' + d.name + '</strong><br>' + d.value + "æ¡ç¯ç½ªè®°å½") 362 .style("left", (d3.event.pageX) + "px") 363 .style("top", (d3.event.pageY - 28) + "px"); 364 }) 365 .on("mouseout", function(d) { 366 sights_tooltip.transition() 367 .duration(500) 368 .style("opacity", 0); 369 }) 370 .on("click", function(d) { 371 document.getElementById("story_table").innerHTML = '' 372 // document.getElementById("story_table").style['background-color'] = 'red' 373 for (i = 0; i < d.story.length; i++) { 374 document.getElementById("story_table").innerHTML += "<br><hr color='#A13924' size='0.5'>" + d.story[i] 375 } 376 }); 377 378 379 380 381 repeat(); 382 383 //ç¹ç¹æ¾å¤§ç¼©å°å¨ç» 384 function repeat() { 385 sights.attr("r", function() { 386 return this.__data__.value + 4 387 }) 388 .transition() 389 .duration(1200) 390 .attr('r', function() { 391 return this.__data__.value + 6 392 }) 393 .transition() 394 .duration(1200) 395 .attr('r', function() { 396 return this.__data__.value + 4 397 }) 398 //version4éé¢eachåæäºon 399 .on("end", repeat) 400 } 401} 402d3.json("data/refugee.json", draw_refugee); 403 404 405function draw_spot(spot_data) { 406 var spots = layer2 407 .append('g') 408 .attr('class', 'spot') 409 .selectAll("circle") 410 .data(spot_data) 411 .enter() 412 .append('circle') 413 .attr('cx', function(d) { 414 return projection_small(d.coordinate)[0] 415 }) 416 .attr('cy', function(d) { 417 return projection_small(d.coordinate)[1] 418 }) 419 .attr('fill', "url(#grad1)") 420 //"url(#grad1)" 421 .attr('opacity', 0.9) 422 .attr("r", function(d) { 423 return d.value + 4 424 }) 425 // .attr('stroke', '#505ab5') 426 // .attr('stroke-opacity', '1') 427 // .attr('stroke-width', '3') 428 .on("mouseover", function(d) { 429 // debugger; 430 sights_tooltip.transition() 431 .duration(200) 432 .style("opacity", 0.9); 433 sights_tooltip.html('<strong>' + d.name + '</strong><br>' + d.value + "æ¡ç¯ç½ªè®°å½") 434 .style("left", (d3.event.pageX) + "px") 435 .style("top", (d3.event.pageY - 28) + "px"); 436 }) 437 .on("mouseout", function(d) { 438 sights_tooltip.transition() 439 .duration(500) 440 .style("opacity", 0); 441 }) 442 .on("click", function(d) { 443 document.getElementById("story_table").innerHTML = '' 444 // document.getElementById("story_table").style['background-color'] = 'red' 445 for (i = 0; i < d.story.length; i++) { 446 document.getElementById("story_table").innerHTML += "<br><hr color='#A13924' size='0.5'>" + d.story[i] 447 } 448 }); 449 450 // .on("click", function(d) { 451 // document.getElementById("map").style['background-image'] = 'url("./img/' + (d.id + 1) + '.jpeg")' 452 // }); 453} 454 455d3.json("data/spot.json", draw_spot);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.