https://olivialan.github.io/nanjing/js/animated_map.js

1var max_width = window.innerWidth
2document.getElementById("story_table_2").style['max-width'] = max_width - 900 + "px"
3
4
5var displayDay = 0,
6    isPlaying = false,
7    animationInterval = 1500;
8
9/* Event handling */
10
11function initializeEventHandlers(sights_data) {
12    d3.select("#year-input")
13        .on("input", function() {
14            isPlaying = false;
15            displayDay = +this.value;
16            updateChart(sights_data);
17        });
18
19    d3.select("#play-button")
20        .on("click", function() {
21            isPlaying = !isPlaying;
22        });
23}
24
25var tooltip = d3.select("body").append("div")
26    .attr("class", "tooltip")
27    .style("opacity", 0);
28
29
30/* Initialization */
31// function initializeAxes() {
32//     let tickSize = 420;
33
34//     var axis = d3.axisBottom()
35//         .scale(maleScale)
36//         .ticks(7)
37//         .tickSize(tickSize)
38//         .tickFormat(function(d) {
39//             return d / 10000;
40//         });
41
42//     d3.select(".male.axis")
43//         .call(axis);
44
45//     axis.scale(femaleScale);
46//     d3.select(".female.axis")
47//         .call(axis);
48// }
49
50function initializeAnimation(sights_data) {
51    window.setInterval(function() {
52        if (!isPlaying) {
53            d3.select("#play-button").node().innerText = "播放动画"
54            return;
55        } else {
56            d3.select("#play-button").node().innerText = "停止动画"
57        }
58        displayDay += 1;
59        if (displayDay > 55) {
60            displayDay = 0;
61        }
62        updateChart(sights_data);
63    }, animationInterval);
64
65
66}
67
68
69/* Data handling */
70// function initializeData(csv) {
71//     data = csv.map(function(d) {
72//         return {
73//             year: +d.year,
74//             age: d.age,
75//             male_pop: +d.male_pop,
76//             female_pop: +d.female_pop
77//         }
78//     });
79
80//     data = data.filter(function(d) {
81//         return d.age !== "Total";
82//     });
83// }
84
85var svg_map = d3.select("#animated_map")
86
87var animation_layer1 = svg_map.append('g');
88var animation_layer2 = svg_map.append('g');
89var animation_layer3 = svg_map.append('g');
90
91var refugee_camps = ['鼓楼西难民收容所（鼓楼广场西侧）', '金陵女子文理学院', '金陵大学蚕厂难民收容所', '陆军大学的难民收容所', '西门子难民收容所(广州路46号)', '大方巷的难民收容所（大方巷东口）', '五台山小学难民收容所', '大学附中', '金陵大学小桃园', '金陵神学院（大锏银巷17号)', '圣经师资培训学校难民收容所', '汉口路小学难民收容所（汉口路）'];
92
93//设置地图映射方式
94var projection = d3.geoMercator()
95    .center([118.8089, 32.065])
96    .scale(300000)
97    //整个上海.scale(23000)
98    // .translate([width / 2, height / 2]);
99
100
101function draw(geo_data) {
102    // "use strict";
103    var margin = 30,
104        // width = $(window).width() / 2.5 - margin,
105        width = 800 - margin,
106        height = 800 - margin;
107
108    svg_map
109        .append("svg")
110        .attr("viewBox", "0 0 " + width + " " + height)
111        .attr("preserveAspectRatio", "xMinYMin")
112        // .attr("width", width + margin)
113        // .attr("height", height + margin)
114        // .attr('fill', 'black')
115        .append('g')
116        .attr('class', 'map');
117
118    //生成一个渐变的defs
119    var gradient = svg_map.append("defs")
120        .append("radialGradient")
121        .attr("id", "grad1")
122        .attr("cx", "50%")
123        .attr("cy", "50%")
124        .attr("r", "50%")
125        .attr("fx", "50%")
126        .attr("fy", "50%")
127
128    gradient
129        .append("stop")
130        .attr("offset", "20%")
131        .style("stop-color", "brown")
132
133
134    gradient
135        .append("stop")
136        .attr("offset", "100%")
137        .style("stop-color", "rgb(43, 43, 43)")
138
139
140    var tooltip = d3.select("body").append("div")
141        .attr("class", "tooltip")
142        .style("opacity", 0);
143
144    var sights_tooltip = d3.select("body").append("div")
145        .attr("class", "tooltip")
146        .style("opacity", 0);
147
148    //debugger
149    //查看数据是否load好;
150    var path = d3.geoPath().projection(projection);
151
152    var map = svg_map.selectAll('path')
153        .data(geo_data.features)
154        .enter()
155        .append('path')
156        .attr('d', path)
157        .attr('fill', 'transparent')
158        .attr('stroke', "white")
159        .attr('stroke-width', 0.3)
160        .attr('stroke-opacity', 0.5);
161
162    //debugger;
163    //将小段小段的path按照名字集合，key是路名
164    // var nested = d3.nest()
165    //     .key(function(d) {
166    //         return d.properties.name
167    //     })
168    //     .entries(geo_data.features);
169
170    // streets = nested.filter(street =>
171    //     street.key == "中山路" ||
172    //     street.key == "广州路" ||
173    //     street.key == "小粉桥"
174    // );
175    // counter = [0, 1, 2];
176
177
178    // for (var i in counter) {
179    //     var certain_path = svg_map.selectAll('path streets')
180    //         .data(streets[i].values)
181    //         .enter()
182    //         .append("path")
183    //         .attr("class", "streets street_" + i)
184    //         .attr('d', path)
185    //         .attr('fill', 'transparent')
186    //         .attr('stroke', 'white')
187    //         .attr('stroke-width', '3')
188    //         .attr('stroke-opacity', '1')
189    //         .on("mouseover", function(d) {
190    //             //选定道路出现tooltip
191    //             tooltip.transition()
192    //                 .duration(200)
193    //                 .style("opacity", 0.9);
194    //             if (d.properties.name == '广州路') {
195    //                 tooltip.html('<strong >广州路</strong><br>拉贝')
196    //                     .style("left", (d3.event.pageX) + "px")
197    //                     .style("top", (d3.event.pageY - 28) + "px");
198    //             } else if (d.properties.name == '小粉桥') {
199    //                 tooltip.html('<strong >小粉桥</strong><br>拉贝<br>')
200    //                     .style("left", (d3.event.pageX) + "px")
201    //                     .style("top", (d3.event.pageY - 28) + "px");
202    //             } else if (d.properties.name == '中山路') {
203    //                 tooltip.html('<strong >中山路</strong><br>拉贝')
204    //                     .style("left", (d3.event.pageX) + "px")
205    //                     .style("top", (d3.event.pageY - 28) + "px");
206    //             } else if (d.properties.name == '方浜西路') {
207    //                 tooltip.html('<strong >' + d.properties.name + '</strong>' + '<br>haha' + d.properties.history)
208    //                     .style("left", (d3.event.pageX) + "px")
209    //                     .style("top", (d3.event.pageY - 28) + "px");
210    //             }
211    //             //选定的道路变色
212    //             d3.selectAll("." + this.className.baseVal.substring(8))
213    //                 .attr('stroke', 'white')
214    //                 .attr('stroke-width', '7')
215    //                 .attr('stroke-opacity', '1')
216
217    //         })
218    //         .on("mouseout", function(d) {
219    //             // infobox.transition()
220    //             //     .duration(500)
221    //             //     .style("opacity", 0);
222    //             tooltip.transition()
223    //                 .duration(500)
224    //                 .style("opacity", 0);
225    //             //debugger;
226    //             d3.selectAll('.streets')
227    //                 .attr('stroke', 'white')
228    //                 .attr('stroke-width', '3')
229    //                 .attr('stroke-opacity', '1')
230    //         });
231
232    //     //实现线条的动态加载
233    //     /* certain_path
234    //         .attr("stroke-dasharray", 50 + " " + 5)
235    //         .attr("stroke-dashoffset", 45)
236    //         .transition() // Call Transition Method
237    //         .duration(1000) // Set Duration timing (ms)
238    //         .ease('linear') // Set Easing option
239    //         .attr("stroke-dashoffset", 0); */
240    // }
241
242    //projection初次设定后，可以画个圆检查落点; 或用于添加景点、地标等
243};
244d3.json("data/labei.json", draw);
245
246
247//下面是画散点的
248function updateChart(sights_data) {
249
250    var yearData = sights_data.filter(function(d) {
251        return d.day_id === displayDay;
252    });
253
254    animation_layer2.selectAll("circle")
255        .remove();
256
257    var sights = animation_layer2
258        .selectAll("circle")
259        .data(yearData)
260        .enter()
261        .append('circle')
262        .attr('cx', function(d) {
263            return projection(d.coordinate)[0]
264        })
265        .attr('cy', function(d) {
266            return projection(d.coordinate)[1]
267        })
268        .attr('fill', function(d) {
269            if (refugee_camps.includes(d.name) == true) {
270                return "url(#grad2)"
271            } else {
272                return "url(#grad1)"
273            }
274        })
275        .attr('opacity', 0.9)
276        // .attr("r", function(d) {
277        //     return d.value + 4
278        // })
279        .attr("r", 0)
280        .on("mouseover", function(d) {
281            // debugger;
282            sights_tooltip.transition()
283                .duration(200)
284                .style("opacity", 0.9);
285            sights_tooltip.html('<strong>' + d.name + '</strong><br>' + d.value + "条犯罪记录")
286                .style("left", (d3.event.pageX) + "px")
287                .style("top", (d3.event.pageY - 28) + "px");
288        })
289        .on("mouseout", function(d) {
290            sights_tooltip.transition()
291                .duration(500)
292                .style("opacity", 0);
293        })
294        .on("click", function(d) {
295            document.getElementById("story_table_2").innerHTML = ''
296                // document.getElementById("story_table").style['background-color'] = 'red'
297            for (i = 0; i < d.story.length; i++) {
298                document.getElementById("story_table_2").innerHTML += "<br><hr color='#A13924' size='0.5'>" + d.story[i]
299            }
300        })
301        .transition()
302        .duration(1200)
303        .attr("r", function(d) {
304            return d.value + 4
305        });
306
307
308
309    // Update main title

310    d3.select("#time").node().innerText = "距12月13日南京大屠杀：" + displayDay + "天";
311    // .text("中国人口结构金字塔 (" + displayDay + ")");
312
313    // Update slider
314    d3.select("#year-input")
315        .node().value = displayDay;
316
317}
318
319d3.json("data/animated_spot.json", function(sights_data) {
320    initializeEventHandlers(sights_data)
321    initializeAnimation(sights_data)
322        // initializeAxes
323    updateChart(sights_data)
324});
325
326
327function draw_polygon(polygon_data) {
328    var path = d3.geoPath().projection(projection);
329
330    animation_layer1.selectAll('path')
331        .data(polygon_data.features)
332        .enter()
333        .append('path')
334        .attr('d', path)
335        .attr('fill', 'white')
336        .attr('opacity', 0.2)
337        .attr('stroke', "white")
338        .attr('stroke-width', 1)
339        .attr('stroke-opacity', 1);
340};
341
342d3.json("data/anquanqu.json", draw_polygon);