d3와 geoJSON파일로 한국 지도 그리기

Question

안녕하세요.우리나라 지도를 그려주려고 d3를 이용하여 그렸는데 잘 나옵니다.나오긴 나오는데 화면을 줄이면 크기가 고정되어 있어 짤려 나와 반응형으로 동작이 안되는데 해당 스크립트 또는 css로 컨트롤하는 방법이 궁금합니다.짤리는 사진과 코드는 아래와 같습니다.function drawMap(target) { var width &#61; 700; var height &#61; 700; var initialScale &#61; 8000; var initialX &#61; -17480; var initialY &#61; 5900; var labels; var projection &#61; d3.geo .mercator() .scale(initialScale) .translate([initialX, initialY]); var path &#61; d3.geo.path().projection(projection); var zoom &#61; d3.behavior .zoom() .translate(projection.translate()) .scale(projection.scale()) .scaleExtent([height, 1000 * height]) //.on('zoom', zoom); var svg &#61; d3 .select(target) .append('svg') .attr('width', width &#43; 'px') .attr('height', height &#43; 'px') .attr('id', 'map') .attr('class', 'map'); var states &#61; svg .append('g') .attr('id', 'states') .call(zoom); states .append('rect') .attr('class', 'background') .attr('width', width &#43; 'px') .attr('height', height &#43; 'px'); d3.json('/Content/API/korea.json', function (json) { states .selectAll('path') .data(json.features) .enter() .append('path') .attr('d', path) .attr('id', function (d) { return 'path-' &#43; d.properties.name_eng; }); labels &#61; states .selectAll('text') .data(json.features) .enter() .append('text') .attr('transform', translateTolabel) .attr('id', function (d) { return 'label-' &#43; d.properties.name_eng; }) .attr('text-anchor', 'middle') .attr('dy', '.35em') .text(function (d) { return d.properties.name; }); CntRegion(); }); function CntRegion() { var objJsonData &#61; new Object(); $.ajax({ type: &#34;POST&#34;, url: &#34;/Home/fnCntRegion&#34;, async: true, dataType: &#34;json&#34;, data: { &#34;vJsonData&#34;: _fnMakeJson(objJsonData) }, success: function (result) { if (result.Result[0][&#34;trxCode&#34;] &#61;&#61; &#34;Y&#34;) { CntImg(result) var vResult &#61; result.Cnt_Table; $.each(vResult, function (i) { states.append(&#34;text&#34;) .text(vResult[i][&#34;CNT&#34;]) .attr(&#34;x&#34;, vResult[i][&#34;X&#34;]) .attr(&#34;y&#34;, vResult[i][&#34;Y&#34;]) .on({ &#34;click&#34;: function () { alert(vResult[i][&#34;CNT&#34;]); } }) }); } else { alert(&#34;실패&#34;); } }, error: function (xhr, error) { alert(&#34;에러&#34;); } }); } function CntImg(vJsonData) { // 지도위에 핀 이미지 박아두기 vResult &#61; vJsonData.Cnt_Table; $.each(vResult, function (i) { if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '32') { /vHtml &#43;&#61; &#34;<input type &#61; \hidden\&#34; class&#61;\&#34;Cnt_img\&#34; value&#61;\&#34;&#34; &#43; vResult[i][&#34;CODE&#34;] &#43; &#34;\&#34;/>&#34;;/ /강원/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 415) .attr(&#34;y&#34;, 140) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '11') { /서울/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 235) .attr(&#34;y&#34;, 175) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '31') { /경기/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 270) .attr(&#34;y&#34;, 210) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '23') { /인천/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 150) .attr(&#34;y&#34;, 165) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '35') { /전북/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 250) .attr(&#34;y&#34;, 490) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '34') { /충남/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 210) .attr(&#34;y&#34;, 370) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '29') { /세종/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 265) .attr(&#34;y&#34;, 350) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '25') { /대전/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 298) .attr(&#34;y&#34;, 385) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '33') { /충북/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 350) .attr(&#34;y&#34;, 320) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '37') { /경북/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 480) .attr(&#34;y&#34;, 385) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '22') { /대구/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 450) .attr(&#34;y&#34;, 480) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '26') { /울산/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 550) .attr(&#34;y&#34;, 525) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '21') { /부산/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 520) .attr(&#34;y&#34;, 585) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '38') { /경남/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 410) .attr(&#34;y&#34;, 560) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '24') { /광주/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 210) .attr(&#34;y&#34;, 590) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '36') { /전남/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 250) .attr(&#34;y&#34;, 640) .attr('class', 'pin') } else if (_fnToNull(vResult[i][&#34;CODE&#34;]) &#61;&#61; '39') { /제주/ states.append(&#34;image&#34;) .attr(&#34;xlink:href&#34;, &#34;/Images/ico02.png&#34;) .attr(&#34;x&#34;, 170) .attr(&#34;y&#34;, 890) .attr('class', 'pin') } }); } //텍스트 위치 조절 - 하드코딩으로 위치 조절을 했습니다. function translateTolabel(d) { var arr &#61; path.centroid(d); if (d.properties.code &#61;&#61; 31) { //서울 경기도 이름 겹쳐서 경기도 내리기 arr[1] &#43;&#61; d3.event && d3.event.scale ? d3.event.scale / height &#43; 20 : initialScale / height &#43; 20; } else if (d.properties.code &#61;&#61; 34) { //충남은 조금 더 내리기 arr[1] &#43;&#61; d3.event && d3.event.scale ? d3.event.scale / height &#43; 10 : initialScale / height &#43; 10; } return 'translate(' &#43; arr &#43; ')'; } function zoom() { projection.translate(d3.event.translate).scale(d3.event.scale); states.selectAll('path').attr('d', path); labels.attr('transform', translateTolabel); }};//html// css#map { border-radius: 20px; width: 100%; height: 1000px; } #koreaMap { fill: #daf2f1; border-radius: 20px; } #states path { fill: #00c4bd; stroke: #daf2f1; stroke-width: 1.5px; } #states path:hover { fill: #009f99; } #states .active { fill: #009f99; } #states .activeDetail { fill: #00B700; } #states path { cursor: pointer; } #states text { cursor: pointer; font-size: 12px; fill: #008984; font-weight: 800; }감사합니다.

d3와 geoJSON파일로 한국 지도 그리기

0개의 답변

#geolocation 목록