xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Republic of Korea </title> <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> <style type="text/css"> body { background-color: #006ECC; font-family: sans-serif; color:#ffffff; } path:hover { opacity:1.0; fill:#FFC941 ; } </style> </head> <body> <h1>Republic of Korea</h1> <p>If you move the mouse on map, you can see the name of selected area</p> <div class="map"></div> <script type="text/javascript"> //Width and height var w = 800; var h = 700; //Define map projection var projection = d3.geo.mercator() .scale(5500) .translate([-11900,4050]); // 해결하긴했는데 어떤 의미인지 물어보기 // 참고링크 : https://codefactory.kr/demos/D3/korean-map/ //Define path generator var path = d3.geo.path() .projection(projection); //Create SVG var svg = d3.select(".map") .append("svg") .attr("width", w) .attr("height", h); //Load in GeoJSON data d3.json("stateen.json", function(json) { //Bind data and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .attr("fill","#ffffff") .attr("opacity",0.2) .append("svg:title") .text(function(d){ return d.properties.name; }); }); </script> </body></html> https://d3js.org/d3.v3.min.js