D3.js 영국 지도 zoom/pan

Developer
Codefactory
Size
2,324 Kb
Views
22,264
  1. D3.js 영국 지도 zoom/pan Previews
  2. D3.js 영국 지도 zoom/pan HTML Codes
  3. D3.js 영국 지도 zoom/pan CSS Codes
  4. D3.js 영국 지도 zoom/pan JS Codes

How do I make an d3.js 영국 지도 zoom/pan?

출처: http://bl.ocks.org/2322933. What is a d3.js 영국 지도 zoom/pan? How do you make a d3.js 영국 지도 zoom/pan? This script and codes were developed by Codefactory on 26 November 2022, Saturday.

D3.js 영국 지도 zoom/pan Previews
IQ Test

D3.js 영국 지도 zoom/pan - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3.js 영국 지도 zoom/pan</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://codefactory.kr/demos/codepen/data/uk.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3.js 영국 지도 zoom/pan - Script Codes CSS Codes

#uk { fill: #E5F5F9; stroke: #2CA25F; stroke-width: 0.5;
}

D3.js 영국 지도 zoom/pan - Script Codes JS Codes

// d3.js 라이브러리, 플러그인 로드
var head = document.getElementsByTagName('head')[0], s = document.createElement('script');
s.src = 'https://d3js.org/d3.v3.min.js';
head.appendChild(s);
// script 시작
window.onload = function() { var w = 750; var h = 300; var projection = d3.geo.mercator(); var path = d3.geo.path().projection(projection); var t = projection.translate(); // the projection's default translation var s = projection.scale(); var map = d3.select("body").append("svg") .attr("width", w) .attr("height", h) .call(d3.behavior.zoom().on("zoom", redraw)); var uk = map.append("g").attr("id", "uk"); // 데이터 가져옴 var data = codepenData; uk.selectAll("path") .data(data.features) .enter().append("path") .attr("d", path); // zoom, pan 할 때 실행되는 함수 function redraw() { // d3.event.translate (an array) stores the current translation from the parent SVG element // t (an array) stores the projection's default translation // we add the x and y vales in each array to determine the projection's new translation var tx = t[0] * d3.event.scale + d3.event.translate[0]; var ty = t[1] * d3.event.scale + d3.event.translate[1]; projection.translate([tx, ty]); // now we determine the projection's new scale, but there's a problem: // the map doesn't 'zoom onto the mouse point' projection.scale(s * d3.event.scale); // redraw the map uk.selectAll("path").attr("d", path); }
};
D3.js 영국 지도 zoom/pan - Script Codes
D3.js 영국 지도 zoom/pan - Script Codes
Home Page Home
Developer Codefactory
Username codefactory
Uploaded November 26, 2022
Rating 3
Size 2,324 Kb
Views 22,264
Do you need developer help for D3.js 영국 지도 zoom/pan?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Codefactory (codefactory) Script Codes
Name
Behave.js Demo
D3.js Fahey projection
A Pen by codefactory
Slicebox - 3D Image Slider
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!