1var width = window.innerWidth; 2var height = window.innerHeight; 3var scale = 11000; 4var interval_next_pref = 6000; 5var random_inteval_frag = true; 6function omittedContent(string) { 7 // å®æ°ã§å®£è¨ 8 const MAX_LENGTH = 36; 9 10 // ããstringã®æåæ°ãMAX_LENGTHï¼ä»åã¯10ï¼ãã大ããã£ããæ«å°¾ã«...ãä»ã足ãã¦è¿ãã 11 if (string.length > MAX_LENGTH) { 12 // substr(ä½æåç®ããã¹ã¿ã¼ãããã, æ大å¤); 13 return string.substr(0, MAX_LENGTH) + "..."; 14 } 15 //ãæåæ°ããªã¼ãã¼ãã¦ããªããã°ãã®ã¾ã¾è¿ã 16 return string; 17} 18function normalizeCardText(string) { 19 return string 20 .replace(/<br\s*\/?>/gi, " ") 21 .replace(/[\r\n\t]+/g, " ") 22 .replace(/ {2,}/g, " ") 23 .trim(); 24} 25let swiper = new Swiper(".swiper", { 26 // Optional parameters 27 loopAdditionalSlides: 5, 28slidePerView:4, 29spaceBetween:14, 30 loop: true, 31 width: 232, 32 33 // If we need pagination 34 pagination: { 35 el: ".swiper-pagination", 36 }, 37 38 // Navigation arrows 39 navigation: { 40 nextEl: ".next", 41 prevEl: ".prev", 42 }, 43 44 // And if we need scrollbar 45 scrollbar: { 46 el: ".swiper-scrollbar", 47 }, 48}); 49 50var clip_tile_size = { 51 width: 24, 52 height: 24, 53}; 54 55var map_limit = { 56 east: 145.3660991, //ï¼æ ¹å®¤å¸ï¼ 57 west: 127.6693328, //ï¼é£è¦å¸ï¼ 58 north: 45.3459274, //ï¼ç¨å å¸ï¼ 59 south: 26.219798, //ï¼é£è¦å¸ï¼ 60}; 61 62var transition_duration = 1000; 63var tick_count = 0; 64var animating = false; 65 66var projection = d3.geo.mercator().scale(scale).center([139.883565, 36.565725]); 67 68var path = d3.geo.path().projection(projection); 69 70var mapDOM = d3.select("#map"); 71 72var svg = mapDOM.append("svg").attr("width", width).attr("height", height); 73 74var xhr = new XMLHttpRequest(); 75xhr.open("GET", "map/json/japan.topojson"); 76xhr.addEventListener("load", function (e) { 77 var obj = JSON.parse(e.currentTarget.responseText); 78 var geometries = topojson.feature(obj, obj.objects.japan).features; 79 var countries = svg 80 .append("g") 81 .attr("class", "map_base") 82 .selectAll(".prefecture") 83 .data(geometries); 84 85 //////// clipng mask group 86 87 d3.select(".map_base").insert("g").attr("class", "clip_background"); 88 89 svg 90 .select(".clip_background") 91 .insert("defs") 92 .insert("pattern") 93 .attr("patternUnits", "userSpaceOnUse") 94 .attr("id", "background_tile") 95 .attr("x", 0) 96 .attr("y", 0) 97 .attr("width", clip_tile_size.width) 98 .attr("height", clip_tile_size.height) 99 .insert("image") 100 .attr("xlink:href", "map/images/background_tile.png") 101 .attr("x", 0) 102 .attr("y", 0) 103 .attr("width", clip_tile_size.width) 104 .attr("height", clip_tile_size.height); 105 106 //make clip path 107 svg 108 .select(".clip_background") 109 .insert("clipPath", "prefecture") 110 .attr("id", "prefectureClip") 111 .datum(topojson.feature(obj, obj.objects.japan)) 112 .attr("class", "allFeature") 113 .insert("path") 114 .attr("d", path); 115 116 // clip background image 117 svg 118 .select(".clip_background") 119 .insert("rect") 120 .attr("fill", "url(#background_tile)") 121 .attr("clip-path", "url(#prefectureClip)") 122 .attr("x", 0) 123 .attr("y", 0) 124 .attr("width", width) 125 .attr("height", height); 126 127 ////////////////////////////// 128 129 var centerCoord = projection.center(); 130 var currentTranslate = [0, 0]; 131 var backgroudTile = svg.select("#background_tile"); 132 var backgroudTileRect = svg.select(".clip_background").selectAll("rect"); 133 134 countries 135 .enter() 136 .insert("path") 137 .attr("class", "prefecture") 138 .attr("d", path) 139 .style("fill", "none") 140 .style("stroke", "#16a9ec") 141 .style("stroke-width", ".5px") 142 .style("stroke-linejoin", "round"); 143 144 var xhr = new XMLHttpRequest(); 145 xhr.open("GET", "map/json/programs.json?2026022402"); 146 147 xhr.addEventListener("load", function (e) { 148 var obj = JSON.parse(e.currentTarget.responseText); 149 // var ul = document.createElement('ul'); 150 151 // obj.reduce(function(ul, program, index) { 152 // var li = document.createElement('li'); 153 // var img = document.createElement('img'); 154 // ul.className = 'swiper-wrapper'; 155 // li.className = 'swiper-slide'; 156 // li.setAttribute('data-program', JSON.stringify(program)); 157 // li.appendChild(img); 158 // img.setAttribute('src', 'map/images/nav/' + program.pref_name + program.serial_number +'.jpg'); 159 160 // li.addEventListener('click', function(e) { 161 // // console.log(program); 162 // // configLargePin(program); 163 // // pan(program, transition_duration); 164 // var target_program = 'program-num-' + program.program_number; 165 // resetAllSmallPref(target_program); 166 167 // $('.pref-pin-large').removeClass('active__map') 168 // .promise() 169 // .done(function() { 170 // setTimeout(function() { 171 // configLargePin(program); 172 // resetTickCount(); 173 // pan(program, transition_duration); 174 // }, 200); 175 // }); 176 // }); 177 178 // ul.appendChild(li); 179 // return ul; 180 // }, ul); 181
182 $(document).on("click", "[data-program]", function (e) { 183 var program = $(this).data("program"); 184 var target_program = "program-num-" + program.program_number; 185 resetAllSmallPref(target_program); 186 187 $(".pref-pin-large") 188 .removeClass() 189 .addClass("pref-pin-large") 190 .promise() 191 .done(function () { 192 setTimeout(function () { 193 configLargePin(program); 194 resetTickCount(); 195 pan(program, transition_duration); 196 }, 200); 197 }); 198 }); 199 200 // document.getElementById('map-prefs').appendChild(ul); 201 202 var pref_group = mapDOM.append("div").attr("class", "pref_group"); 203 // var pref_slider = document.getElementById("slider"); 204 var pref_pin_small = d3.select(".pref-pin-small"); 205 206 // prefecture slider 207 console.log("obj"); 208 console.log(obj); 209 let elmColor = ""; 210 obj.forEach((elm) => { 211 var div = document.createElement("div"); 212 let elmNumber = elm.serial_number == "" ? "00" : elm.serial_number; 213 214 elmColor = "#" + elm.color.slice(2); 215 let omitText = `${normalizeCardText(elm.program_title)} ã${normalizeCardText(elm.activity_title)}ã`; 216 let num_json = { 217 "00":"", 218 "01": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.6 8.42"><defs></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><path fill='${elmColor}' class="cls-1" d="M.18,6.88A11.89,11.89,0,0,1,0,4.21,11.78,11.78,0,0,1,.18,1.55,2.12,2.12,0,0,1,2.41,0,2.12,2.12,0,0,1,4.64,1.55a11.78,11.78,0,0,1,.18,2.66,11.89,11.89,0,0,1-.18,2.67A2.11,2.11,0,0,1,2.41,8.42,2.12,2.12,0,0,1,.18,6.88Zm1-.21a1.17,1.17,0,0,0,1.23.82,1.18,1.18,0,0,0,1.24-.82,12.05,12.05,0,0,0,.13-2.46,12.19,12.19,0,0,0-.13-2.46A1.18,1.18,0,0,0,2.41.94a1.17,1.17,0,0,0-1.23.81A11.85,11.85,0,0,0,1,4.21,11.71,11.71,0,0,0,1.18,6.67Z"/><path fill='${elmColor}' class="cls-1" d="M8.59,8.17V1.4h0l-1.36,1c-.09.06-.13,0-.13-.07V1.39a.25.25,0,0,1,.08-.17L8.57.2A.37.37,0,0,1,8.76.13h.72A.11.11,0,0,1,9.6.25V8.17a.11.11,0,0,1-.12.12H8.71A.11.11,0,0,1,8.59,8.17Z"/></g></g></svg>`, 219 "02": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.22 8.42"><defs></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><path fill='${elmColor}' class="cls-1" d="M.18,6.88A11.89,11.89,0,0,1,0,4.21,11.78,11.78,0,0,1,.18,1.55,2.12,2.12,0,0,1,2.41,0,2.12,2.12,0,0,1,4.64,1.55a11.78,11.78,0,0,1,.18,2.66,11.89,11.89,0,0,1-.18,2.67A2.11,2.11,0,0,1,2.41,8.42,2.12,2.12,0,0,1,.18,6.88Zm1-.21a1.17,1.17,0,0,0,1.23.82,1.18,1.18,0,0,0,1.24-.82,12.05,12.05,0,0,0,.13-2.46,12.19,12.19,0,0,0-.13-2.46A1.18,1.18,0,0,0,2.41.94a1.17,1.17,0,0,0-1.23.81A11.85,11.85,0,0,0,1,4.21,11.71,11.71,0,0,0,1.18,6.67Z"/><path fill='${elmColor}' class="cls-1" d="M6.61,8.17V7.55a.25.25,0,0,1,.06-.17L9.61,3.64a2.29,2.29,0,0,0,.58-1.42,1.27,1.27,0,0,0-.35-.92A1.24,1.24,0,0,0,8.9.94a1.24,1.24,0,0,0-1.33,1.2.09.09,0,0,1-.13.09l-.73-.15a.14.14,0,0,1-.1-.15A2.16,2.16,0,0,1,7.3.57,2.3,2.3,0,0,1,8.93,0,2.3,2.3,0,0,1,10.6.62a2.19,2.19,0,0,1,.62,1.6,3.21,3.21,0,0,1-.79,2L7.91,7.34v0H11.1a.11.11,0,0,1,.12.12v.69a.11.11,0,0,1-.12.12H6.73A.11.11,0,0,1,6.61,8.17Z"/></g></g></svg>`, 220 "03": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.33 8.42"><defs></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><path fill='${elmColor}' class="cls-1" d="M.18,6.88A11.89,11.89,0,0,1,0,4.21,11.78,11.78,0,0,1,.18,1.55,2.12,2.12,0,0,1,2.41,0,2.12,2.12,0,0,1,4.64,1.55a11.78,11.78,0,0,1,.18,2.66,11.89,11.89,0,0,1-.18,2.67A2.11,2.11,0,0,1,2.41,8.42,2.12,2.12,0,0,1,.18,6.88Zm1-.21a1.17,1.17,0,0,0,1.23.82,1.18,1.18,0,0,0,1.24-.82,12.05,12.05,0,0,0,.13-2.46,12.19,12.19,0,0,0-.13-2.46A1.18,1.18,0,0,0,2.41.94a1.17,1.17,0,0,0-1.23.81A11.85,11.85,0,0,0,1,4.21,11.71,11.71,0,0,0,1.18,6.67Z"/><path fill='${elmColor}' class="cls-1" d="M6.47,6.7a.13.13,0,0,1,.09-.15l.74-.18c.07,0,.12,0,.14.09a1.39,1.39,0,0,0,1.45,1,1.38,1.38,0,0,0,1-.4,1.48,1.48,0,0,0,.38-1A1.51,1.51,0,0,0,9.89,5,1.45,1.45,0,0,0,8.8,4.54H8.44a.11.11,0,0,1-.12-.12v-.7a.11.11,0,0,1,.12-.12h.34a1.34,1.34,0,0,0,1-.37,1.34,1.34,0,0,0,.37-1,1.29,1.29,0,0,0-.35-.93,1.3,1.3,0,0,0-1-.36,1.21,1.21,0,0,0-1.29,1,.14.14,0,0,1-.15.1l-.72-.18a.11.11,0,0,1-.09-.15A1.93,1.93,0,0,1,7.32.49,2.38,2.38,0,0,1,8.87,0a2.27,2.27,0,0,1,1.68.61,2.12,2.12,0,0,1,.62,1.6,2,2,0,0,1-1,1.75V4a1.91,1.91,0,0,1,.81.73A2.28,2.28,0,0,1,11.33,6a2.33,2.33,0,0,1-.69,1.74,2.37,2.37,0,0,1-1.75.67,2.6,2.6,0,0,1-1.6-.48A2.1,2.1,0,0,1,6.47,6.7Z"/></g></g></svg>`, 221 "04": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.6 8.42"><defs></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><path fill='${elmColor}' class="cls-1" d="M.18,6.88A11.89,11.89,0,0,1,0,4.21,11.78,11.78,0,0,1,.18,1.55,2.12,2.12,0,0,1,2.41,0,2.12,2.12,0,0,1,4.64,1.55a11.78,11.78,0,0,1,.18,2.66,11.89,11.89,0,0,1-.18,2.67A2.11,2.11,0,0,1,2.41,8.42,2.12,2.12,0,0,1,.18,6.88Zm1-.21a1.17,1.17,0,0,0,1.23.82,1.18,1.18,0,0,0,1.24-.82,12.05,12.05,0,0,0,.13-2.46,12.19,12.19,0,0,0-.13-2.46A1.18,1.18,0,0,0,2.41.94a1.17,1.17,0,0,0-1.23.81A11.85,11.85,0,0,0,1,4.21,11.71,11.71,0,0,0,1.18,6.67Z"/><path fill='${elmColor}' class="cls-1" d="M6.42,6.86a.11.11,0,0,1-.12-.12V6.08a.27.27,0,0,1,0-.14L9,.23a.15.15,0,0,1,.16-.1H10c.09,0,.11,0,.08.11L7.43,5.92v0H9.59c.05,0,.07,0,.07-.07V3.73a.11.11,0,0,1,.12-.12h.77a.11.11,0,0,1,.12.12V5.87s0,.07.07.07h.74a.11.11,0,0,1,.12.12v.68a.11.11,0,0,1-.12.12h-.74c-.05,0-.07,0-.07.08V8.17a.11.11,0,0,1-.12.12H9.78a.11.11,0,0,1-.12-.12V6.94c0-.05,0-.08-.07-.08Z"/></g></g></svg>`, 222 "05": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.33 8.42"><defs></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><path fill='${elmColor}' class="cls-1" d="M.18,6.88A11.89,11.89,0,0,1,0,4.21,11.78,11.78,0,0,1,.18,1.55,2.12,2.12,0,0,1,2.41,0,2.12,2.12,0,0,1,4.64,1.55a11.78,11.78,0,0,1,.18,2.66,11.89,11.89,0,0,1-.18,2.67A2.11,2.11,0,0,1,2.41,8.42,2.12,2.12,0,0,1,.18,6.88Zm1-.21a1.17,1.17,0,0,0,1.23.82,1.18,1.18,0,0,0,1.24-.82,12.05,12.05,0,0,0,.13-2.46,12.19,12.19,0,0,0-.13-2.46A1.18,1.18,0,0,0,2.41.94a1.17,1.17,0,0,0-1.23.81A11.85,11.85,0,0,0,1,4.21,11.71,11.71,0,0,0,1.18,6.67Z"/><path fill='${elmColor}' class="cls-1" d="M6.7,6.72c0-.08,0-.13.09-.14L7.5,6.4a.14.14,0,0,1,.16.09,1.27,1.27,0,0,0,.44.73A1.37,1.37,0,0,0,9,7.49a1.15,1.15,0,0,0,1.2-.81,3.31,3.31,0,0,0,.11-1,3.23,3.23,0,0,0-.12-1A1.13,1.13,0,0,0,9,3.84a1.33,1.33,0,0,0-.78.22,1.08,1.08,0,0,0-.42.54.16.16,0,0,1-.15.12h-.7a.11.11,0,0,1-.12-.12V.25A.11.11,0,0,1,6.94.13H11a.11.11,0,0,1,.12.12V1a.11.11,0,0,1-.12.12H7.82a.06.
22206,0,0,0-.07.07V3.43h0A1.59,1.59,0,0,1,9.13,2.9a2.27,2.27,0,0,1,1.28.35,1.9,1.9,0,0,1,.74,1,4.74,4.74,0,0,1,.18,1.41A4.27,4.27,0,0,1,11.16,7a1.92,1.92,0,0,1-.8,1.07A2.51,2.51,0,0,1,9,8.42,2.47,2.47,0,0,1,7.43,8,1.89,1.89,0,0,1,6.7,6.72Z"/></g></g></svg>`, 223 "06": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.42 8.42"><defs></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><path fill='${elmColor}' class="cls-1" d="M.18,6.88A11.89,11.89,0,0,1,0,4.21,11.78,11.78,0,0,1,.18,1.55,2.12,2.12,0,0,1,2.41,0,2.12,2.12,0,0,1,4.64,1.55a11.78,11.78,0,0,1,.18,2.66,11.89,11.89,0,0,1-.18,2.67A2.11,2.11,0,0,1,2.41,8.42,2.12,2.12,0,0,1,.18,6.88Zm1-.21a1.17,1.17,0,0,0,1.23.82,1.18,1.18,0,0,0,1.24-.82,12.05,12.05,0,0,0,.13-2.46,12.19,12.19,0,0,0-.13-2.46A1.18,1.18,0,0,0,2.41.94a1.17,1.17,0,0,0-1.23.81A11.85,11.85,0,0,0,1,4.21,11.71,11.71,0,0,0,1.18,6.67Z"/><path fill='${elmColor}' class="cls-1" d="M6.42,5.93A3.91,3.91,0,0,1,7,4.07L9,.22A.14.14,0,0,1,9.19.13H10c.09,0,.11,0,.07.12L8.26,3.64l0,0a1.43,1.43,0,0,1,.83-.19,2.27,2.27,0,0,1,1.65.66,2.4,2.4,0,0,1,.66,1.76,2.46,2.46,0,0,1-.7,1.85,2.49,2.49,0,0,1-1.8.68,2.49,2.49,0,0,1-1.8-.67A2.39,2.39,0,0,1,6.42,5.93Zm1.43-1.1a1.57,1.57,0,0,0-.4,1.11,1.61,1.61,0,0,0,.4,1.12,1.43,1.43,0,0,0,1.07.43A1.41,1.41,0,0,0,10,7.06a1.53,1.53,0,0,0,.41-1.12A1.49,1.49,0,0,0,10,4.83,1.41,1.41,0,0,0,8.92,4.4,1.43,1.43,0,0,0,7.85,4.83Z"/></g></g></svg>`, 224 "07": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.29 8.42"><defs></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><path fill='${elmColor}' class="cls-1" d="M.18,6.88A11.89,11.89,0,0,1,0,4.21,11.78,11.78,0,0,1,.18,1.55,2.12,2.12,0,0,1,2.41,0,2.12,2.12,0,0,1,4.64,1.55a11.78,11.78,0,0,1,.18,2.66,11.89,11.89,0,0,1-.18,2.67A2.11,2.11,0,0,1,2.41,8.42,2.12,2.12,0,0,1,.18,6.88Zm1-.21a1.17,1.17,0,0,0,1.23.82,1.18,1.18,0,0,0,1.24-.82,12.05,12.05,0,0,0,.13-2.46,12.19,12.19,0,0,0-.13-2.46A1.18,1.18,0,0,0,2.41.94a1.17,1.17,0,0,0-1.23.81A11.85,11.85,0,0,0,1,4.21,11.71,11.71,0,0,0,1.18,6.67Z"/><path fill='${elmColor}' class="cls-1" d="M7.43,8.16,10.21,1.1v0H7.73c-.05,0-.07,0-.07.07v1a.11.11,0,0,1-.12.12H6.82a.11.11,0,0,1-.12-.12V.25A.11.11,0,0,1,6.82.13h4.35a.11.11,0,0,1,.12.12V1a.74.74,0,0,1,0,.12L8.46,8.18a.15.15,0,0,1-.16.11H7.5C7.41,8.29,7.39,8.25,7.43,8.16Z"/></g></g></svg>`, 225 }; 226 227 swiper.appendSlide(`<div class="pref-column-item swiper-slide" data-program='${JSON.stringify(elm)}'> 228 <div 229 class="pref-column-item_img" 230 style=" 231 background-image: url('${elm.image}'); 232 " 233 ></div> 234 <div 235 class="pref-column-item_pref" 236 style=" 237 background-image: url('/report/common/images/pref_title/title_${ 238 elm.pref_name 239 }.png'); 240 " 241 ></div> 242 <div class="pref-column-item_serial"> 243 ${num_json[elmNumber]} 244 </div> 245 <hr> 246 <div class="pref-column-item_text"> 247 <p> 248 ${omittedContent(omitText)} 249 </p> 250 </div> 251 </div>`); 252 }); 253 254 // prefecture pins 255 256 pref_group 257 .selectAll(".pref-pin-small") 258 .data(obj) 259 .enter() 260 .append(function (d) { 261 //TODO assign ruby text 262 263 var setColor = d.color.replace("0x", ""); 264 // var prefName = d.pref_name.replace("_riv", " riv."); 265 // var pref_small_bg = pref_pin_small.select(".pref-bg-color"); 266 // var pref_small_bg_arrow = pref_pin_small.select(".pref-bg-color-arrow"); 267 // var pref_img = pref_pin_small.select(".pref img"); 268 let pref_pin_img = pref_pin_small.select("img"); 269 270 271 pref_pin_img.attr("alt", d.pref_name.toUpperCase() + " " + d.pref + " "+d.serial_number); 272 pref_pin_img.attr( 273 "src", 274 "/report/common/images/small_pin/pin_" + 275 d.pref_name + 276 d.serial_number + 277 ".png" 278 ); 279 // pref_pin_small.select(".pref-body > .pref-ruby").html(prefName); 280 // pref_pin_small 281 // .select(".pref-body > .pref-serial") 282 // .html(d.serial_number); 283 // pref_small_bg.style("background-color", "#" + setColor); 284 // pref_small_bg_arrow.style("border-top-color", "#" + setColor); 285 286 return pref_pin_small.node().cloneNode(true); 287 }) 288 .style("display", "block") 289 .style("position", "absolute") 290 .style("left", function (d, i) { 291 return projection([d.longtitude, d.latitude])[0] + "px"; 292 }) 293 .style("top", function (d, i) { 294 return projection([d.longtitude, d.latitude])[1] + "px"; 295 }) 296 .attr("class", function (d) { 297 return "pref-pin-small program-num-" + d.program_number; 298 }); 299 // .style('transform', function(d, i) { 300 // return 'translate(' + projection([d.longtitude, d.latitude])[0] + 'px, ' + projection([d.longtitude, d.latitude])[1] + 'px)'; 301 // }); 302 303 // swiperAdapt(obj.length); 304 305 //large pin 306 var pref_pin_large = d3.select(".pref-pin-large"); 307 308 d3.selectAll(".pref_group").append(function () { 309 $(".pref-pin-large").remove(); 310 return pref_pin_large.node().cloneNode(true); 311 }); 312 var elstab = { 313 columnImage: document.querySelector(".pref-column-item_img"), 314 columnPref: document.querySelector(".pref-column-item_pref"), 315 columnSerial: document.querySelector(".pref-column-item_serial"), 316 columnText: document.querySelector(".pref-column-item_text p"), 317 }; 318 319 var els = { 320 pref: $(".pref-pin-large .pref")[0], 321 prefTitle: document.querySelector(".pref-pin-large .pref img"), 322 programImg: document.querySelector(".pref-image"), 323 programTitleWrapper: document.querySelector(".program-title-wrapper"), 324 programTitle: document.querySelector(".program-title"), 325 activityTitle: document.querySelector(".activity-title"), 326 programTitle: document.querySelector(".program-title"), 327 programTerm: document.querySelector(".program-term"), 328 programDetail: document.querySelector(".program-detail"), 329 prefHref: document.querySelector(".pref-href"), 330 prefRuby: document.querySelector(".pref-pin-large .pref-ruby"), 331 prefSerial: document.querySelector(".pref-pin-large .pref-serial"), 332 programBg: document.querySelector(".pref-bg-color-l"), 333 programBgArrow: document.querySelector(".pref-bg-color-arrow-l"), 334 }; 335 336 var zoom = d3.behavior.zoom().on("zoom", function () { 337 // projection.scale(scale, d3.event.scale); 338 // svg.attr('d', path); 339 // var value = 'translate(' + d3.event.translate.join(',')+ ')scale(' + d3.event.scale + ')'; 340 // svg.select('g').attr('transform', value); 341 }); 342 343 var drag = d3.behavior.drag().on("drag", function (d, i) { 344 var scale = 1.0; 345 346 var x_ = currentTranslate[0]; 347 var y_ = currentTranslate[1]; 348 349 var absolute_x_ = x_; 350 var absolute_y_ = y_ - height; 351 352 x_ += d3.event.dx; 353 y_ += d3.event.dy; 354 355 absolute_x_ += d3.event.dx; 356 absolute_y_ += d3.event.dy; 357 358 svg 359 .select("g") 360 .attr("transform", "translate(" + [x_, y_] + ") scale (" + scale + ")"); 361 362 backgroudTile.attr("x", -x_).attr("y", -y_); 363 364 backgroudTileRect.attr("x", -x_).attr("y", -y_); 365 366 pref_group.attr( 367 "style", 368 "transform:" + "translate(" + absolute_x_ + "px," + absolute_y_ + "px)" 369 ); 370 371 resetTickCount(); 372 // console.log(projection.center()) 373 currentTranslate = [x_, y_]; 374 }); 375 376 var map_el = d3.select("#map"); 377 map_el.call(drag); 378 379 //mouse event 380 $(".pref-pin-small") 381 .on("mouseenter", function (e) { 382 e.stopPropagation(); 383 // console.log('mouse enter ! : ',e.currentTarget.__data__) 384 }) 385 .on("mousedown", function (e) { 386 var _data = e.currentTarget.__data__; //<- is this safe ? 387 388 var target_program = "program-num-" + _data.program_number; 389 resetAllSmallPref(target_program); 390 $(this).css("display", "none"); 391 392 $(".pref-pin-large") 393 .removeClass() 394 .addClass("pref-pin-large") 395 .promise() 396 .done(function () { 397 setTimeout(function () { 398 configLargePin(_data); 399 pan(_data, transition_duration); 400 resetTickCount(); 401 }, 200); 402 }); 403 404 // configLargePin(_data); 405 // pan(_data, transition_duration); 406 }); 407 408 function pan(d, duration) { 409 animating = true; 410 var scale = 1; 411 var offset = 1.015; // ã¹ã¯ãªã¼ã³ä¸å¤®ããè¥å¹²ä¸ã«è¨å® 412 var translate_absolute = projection([d.longtitude, d.latitude * offset]); 413 var translate = projection([d.longtitude, d.latitude * offset]); 414
415 translate_absolute[1] = -translate_absolute[1] - height / 2; 416 translate_absolute[0] = -translate_absolute[0] + width / 2; 417 translate[1] = height / 2 - translate[1]; 418 translate[0] = width / 2 - translate[0]; 419 centerCoord = [d.longtitude, d.latitude]; 420 currentTranslate = translate; 421 422 svg 423 .select("g") 424 .transition() 425 .duration(duration) 426 .ease("exp-out") 427 .attr( 428 "transform", 429 "translate(" + translate + ") scale (" + scale + ")" 430 ); 431 432 backgroudTile 433 .transition() 434 .duration(duration) 435 .ease("exp-out") 436 .attr("x", -translate[0]) 437 .attr("y", -translate[1]); 438 439 backgroudTileRect 440 .transition() 441 .duration(duration) 442 .ease("exp-out") 443 .attr("x", -translate[0]) 444 .attr("y", -translate[1]); 445 446 pref_group 447 .transition() 448 .duration(duration) 449 .ease("exp-out") 450 .attr( 451 "style", 452 "transform:" + 453 "translate(" + 454 translate_absolute[0] + 455 "px," + 456 translate_absolute[1] + 457 "px)" 458 ) 459 .each("end", function () { 460 animating = false; 461 }); 462 } 463 464 function configLargePin(_data) { 465 var setColor = _data.color.replace("0x", ""); 466 var prefName = _data.pref_name.replace("_riv", " riv."); 467 var blankImage = 468 "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; 469 els.programImg.style.backgroundImage = "url(" + blankImage + ")"; 470 els.programImg.style.backgroundImage = "url(" + _data.image + ")"; 471 els.prefTitle.setAttribute("src", blankImage); 472 els.prefTitle.setAttribute("alt", _data.pref); 473 els.prefTitle.setAttribute( 474 "src", 475 "map/images/pin/map_large_" + _data.pref_name + ".png" 476 ); 477 478 els.programTitleWrapper.style.backgroundColor = "#" + setColor; 479 els.programTitleWrapper.style.borderColor = "#" + setColor; 480 els.programTitle.innerHTML = _data.program_title.replace(/ /g, "<br>"); 481 482 if (_data.pref_name == "niigata" || _data.pref_name == "yamanashi" ) { 483 els.programTitle.style.padding = "10px 0"; 484 els.programTitle.style.fontSize = "12px"; 485 } else { 486 487 els.programTitle.style.fontSize = "13px"; 488 } 489 490 els.programTitle.style.color = "#" + setColor; 491 els.programDetail.style.backgroundColor = "#" + setColor; 492 els.activityTitle.innerHTML = _data.activity_title.replace(/ /g, "<br>"); 493 els.programTerm.innerHTML = _data.the_day.replace(/\s/g, "<br>"); 494 els.prefRuby.textContent = prefName.toUpperCase(); 495 els.prefSerial.textContent = _data.serial_number; 496 els.prefHref.setAttribute("href", _data.href); 497 els.programBg.style.backgroundColor = "#" + setColor; 498 els.programBgArrow.style.borderTopColor = "#" + setColor; 499 500 var translate = projection([_data.longtitude, _data.latitude]); 501 $(".pref-pin-large").css( 502 "transform", 503 "translate(" + translate[0] + "px," + translate[1] + "px)" 504 ); 505 $(".pref-pin-large").addClass( 506 "active__map active__" + _data.program_number 507 ); 508 } 509 510 function onResize(centerCoord) { 511 var _width = (width = event.target.innerWidth || event.target.width); 512 var _height = (height = event.target.innerHeight || event.target.height); 513 var center = { longtitude: centerCoord[0], latitude: centerCoord[1] }; 514 515 svg.attr("width", _width).attr("height", _height); 516 517 backgroudTileRect.attr("width", _width).attr("height", _height); 518 519 pan(center, transition_duration); 520 } 521 522 window.addEventListener("resize", function () { 523 onResize(centerCoord); 524 }); 525 526 function chooseRandomPref() { 527 var index = Math.floor(Math.random() * (obj.length - 1)); 528 return obj[index]; 529 } 530 531 var random_inteval_func = function () { 532 setTimeout(function () { 533 if (!random_inteval_frag) { 534 return; 535 } 536 var randomPref = chooseRandomPref(); 537 pan( 538 { latitude: randomPref.latitude, longtitude: randomPref.longtitude }, 539 transition_duration 540 ); 541 configLargePin(randomPref); 542 var target_program = "program-num-" + randomPref.program_number; 543 resetAllSmallPref(target_program); 544 random_inteval_func(); 545 }, interval_next_pref); 546 }; 547 548 var resetTickCount = function () { 549 random_inteval_frag = false;
550 tick_count = 0; 551 }; 552 553 var resetAllSmallPref = function (target_porgram) { 554 $(".pref-pin-small").each(function () { 555 var state = "block"; 556 if (0 < $(this).attr("class").indexOf(target_porgram)) { 557 state = "none"; 558 } 559 $(this).css("display", state); 560 }); 561 }; 562 563 var randomPref = chooseRandomPref(); 564 pan( 565 { latitude: randomPref.latitude, longtitude: randomPref.longtitude }, 566 0 567 ); 568 configLargePin(randomPref); 569 var target_program = "program-num-" + randomPref.program_number; 570 resetAllSmallPref(target_program); 571 572 setInterval(function () { 573 if (random_inteval_frag) { 574 return; 575 } 576 tick_count++; 577 if (250 <= tick_count) { 578 tick_count = 0; 579 random_inteval_frag = true; 580 random_inteval_func(); 581 } 582 }, 30); 583 584 var clickedMoveButton = function (id_) { 585 var dir_ = { x: 0, y: 0 }; 586 switch (id_) { 587 case "arrow-left": 588 dir_.x = -0.5; 589 break; 590 case "arrow-bottom": 591 dir_.y = -0.5; 592 break; 593 case "arrow-top": 594 dir_.y = 0.5; 595 break; 596 case "arrow-right": 597 dir_.x = 0.5; 598 break; 599 default: 600 break; 601 } 602 panToDirection(dir_); 603 }; 604 605 var isLimit = function (coord_) { 606 var east, west, north, south; 607 east = coord_.longtitude > map_limit.east + 2.12; 608 west = coord_.longtitude < map_limit.west - 2.12; 609 north = coord_.latitude > map_limit.north + 2.12; 610 south = coord_.latitude < map_limit.south - 2.12; 611 return east || west || north || south; 612 }; 613 614 var panToDirection = function (dir_) { 615 if (animating) { 616 return; 617 } 618 var move_dist = 1000; 619 var new_position = [dir_.x * move_dist, dir_.y * move_dist]; 620 resetTickCount(); 621 centerCoord[0] += new_position[0] * 0.003; 622 centerCoord[1] += new_position[1] * 0.003; 623 var new_coordination = { 624 longtitude: centerCoord[0], 625 latitude: centerCoord[1], 626 }; 627 if (isLimit(new_coordination)) { 628 (centerCoord[0] -= new_position[0] * 0.003), 629 (centerCoord[1] -= new_position[1] * 0.003); 630 return; 631 } 632 pan(new_coordination, transition_duration); 633 }; 634 635 function addMoveButtonEvent() { 636 $("#arrow-left, #arrow-right, #arrow-top, #arrow-bottom").click(function ( 637 e 638 ) { 639 clickedMoveButton(e.currentTarget.id); 640 }); 641 } 642 643 addMoveButtonEvent(); 644 random_inteval_func(); 645 }); 646 xhr.send(null); 647}); 648xhr.send(null);
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.