D3.js - Địa lý
Tọa độ không gian địa lý thường được sử dụng cho dữ liệu thời tiết hoặc dân số. D3.js cung cấp cho chúng tôi ba công cụ cho dữ liệu địa lý -
Paths - Chúng tạo ra các điểm ảnh cuối cùng.
Projections - Họ biến tọa độ hình cầu thành tọa độ Descartes và
Streams - Họ đẩy nhanh tiến độ.
Trước khi tìm hiểu địa lý trong D3.js là gì, chúng ta nên hiểu hai thuật ngữ sau:
- Đường dẫn địa lý D3 và
- Projections
Hãy để chúng tôi thảo luận chi tiết về hai thuật ngữ này.
Đường dẫn địa lý D3
Nó là một trình tạo đường dẫn địa lý. GeoJSON tạo chuỗi dữ liệu đường dẫn SVG hoặc hiển thị đường dẫn đến Canvas. Canvas được khuyến nghị cho các phép chiếu động hoặc tương tác để cải thiện hiệu suất. Để tạo Trình tạo dữ liệu đường dẫn địa lý D3, bạn có thể gọi hàm sau.
d3.geo.path()Đây, d3.geo.path() chức năng tạo đường dẫn cho phép chúng ta chọn Phép chiếu Bản đồ mà chúng ta muốn sử dụng để dịch từ Tọa độ Địa lý sang Tọa độ Đề các.
Ví dụ, nếu chúng ta muốn hiển thị chi tiết bản đồ của Ấn Độ, chúng ta có thể xác định một con đường như hình dưới đây.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))Các phép chiếu
Phép chiếu biến đổi hình học đa giác cầu thành hình học đa giác phẳng. D3 cung cấp các triển khai phép chiếu sau.
Azimuthal - Phép chiếu phương vị chiếu hình cầu trực tiếp lên mặt phẳng.
Composite - Composite bao gồm một số hình chiếu được ghép thành một màn hình duy nhất.
Conic - Chiếu hình cầu lên một hình nón rồi bóc hình nón lên mặt phẳng.
Cylindrical - Các hình chiếu của hình trụ chiếu hình cầu lên một hình trụ có chứa, rồi mở hình trụ lên mặt phẳng.
Để tạo một phép chiếu mới, bạn có thể sử dụng chức năng sau.
d3.geoProjection(project)Nó xây dựng một phép chiếu mới từ dự án phép chiếu thô được chỉ định. Hàm dự án lấy kinh độ và vĩ độ của một điểm nhất định tính bằng radian. Bạn có thể áp dụng phép chiếu sau trong mã của mình.
var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
.scale(100)
.rotate([100,0,0])
.translate([width/2, height/2])
.clipAngle(45);Ở đây, chúng ta có thể áp dụng bất kỳ một trong các phép chiếu trên. Hãy để chúng tôi thảo luận ngắn gọn về từng dự báo này.
d3.geo.orthographic()- Phép chiếu chính phương là phép chiếu phương vị thích hợp để hiển thị một bán cầu đơn lẻ; điểm của phối cảnh ở vô cùng.
d3.geo.gnomonic() - Phép chiếu gô-tích là phép chiếu phương vị chiếu các đường tròn lớn là các đoạn thẳng.
d3.geo.equirectangular()- Hình chiếu tương đương là phép chiếu địa lý đơn giản nhất có thể. Chức năng nhận dạng. Nó không phải là diện tích bằng nhau cũng không phải là quy chuẩn, nhưng đôi khi được sử dụng cho dữ liệu raster.
d3.geo.mercator() - Phép chiếu Spherical Mercator thường được sử dụng bởi các thư viện lập bản đồ lát gạch.
d3.geo.transverseMercator() - Phép chiếu Transverse Mercator.
Ví dụ làm việc
Hãy để chúng tôi tạo bản đồ của Ấn Độ trong ví dụ này. Để làm được điều này, chúng ta nên tuân thủ các bước sau.
Step 1 - Apply styles - Hãy để chúng tôi thêm các kiểu trong bản đồ bằng cách sử dụng mã bên dưới.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>Ở đây, chúng tôi đã áp dụng các màu cụ thể cho trạng thái TN, AP và MP.
Step 2 - Include topojson script - TopoJSON là một phần mở rộng của GeoJSON mã hóa cấu trúc liên kết, được định nghĩa bên dưới.
<script src = "http://d3js.org/topojson.v0.min.js"></script>Chúng tôi có thể bao gồm tập lệnh này trong mã hóa của chúng tôi.
Step 3 - Define variables - Thêm các biến trong tập lệnh của bạn, sử dụng mã bên dưới.
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);Ở đây, chiều rộng SVG là 600 và chiều cao là 400. Màn hình là không gian hai chiều và chúng tôi đang cố gắng trình bày một vật thể ba chiều. Vì vậy, chúng ta có thể bóp méo kích thước / hình dạng đất một cách đáng buồn bằng cách sử dụngd3.geo.mercator() chức năng.
Tâm được chỉ định [78, 22], điều này đặt tâm của phép chiếu đến vị trí đã chỉ định dưới dạng một mảng gồm hai phần tử là kinh độ và vĩ độ theo độ và trả về phép chiếu.
Ở đây, bản đồ đã được căn giữa 78 độ Tây và 22 độ Bắc.
Tỷ lệ được chỉ định là 680, điều này đặt hệ số tỷ lệ của phép chiếu thành giá trị được chỉ định. Nếu tỷ lệ không được chỉ định, nó sẽ trả về hệ số tỷ lệ hiện tại, mặc định là 150. Điều quan trọng cần lưu ý là các hệ số tỷ lệ không nhất quán giữa các phép chiếu.
Step 4 - Append SVG - Bây giờ, nối các thuộc tính SVG.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);Step 5 - Create path - Phần mã sau tạo một trình tạo đường dẫn địa lý mới.
var path = d3.geo.path()
.projection(projection);Ở đây, trình tạo đường dẫn (d3.geo.path ()) được sử dụng để chỉ định kiểu chiếu (.projection), được định nghĩa trước đó là phép chiếu Mercator bằng phép chiếu biến đổi.
Step 6 - Generate data - indatopo.json - Tệp này chứa rất nhiều bản ghi, chúng tôi có thể dễ dàng tải xuống từ tệp đính kèm sau.
Tải xuống indiatopo.json file
Sau khi tệp đã được tải xuống, chúng tôi có thể thêm nó vào vị trí D3 của chúng tôi. Định dạng mẫu được hiển thị bên dưới.
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................Step 7 - Draw map - Bây giờ, hãy đọc dữ liệu từ indiatopo.json tập tin và vẽ bản đồ.
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});Tại đây, chúng tôi sẽ tải tệp TopoJSON với các tọa độ cho bản đồ Ấn Độ (indatopo.json). Sau đó, chúng tôi tuyên bố rằng chúng tôi sẽ thực hiện trên tất cả các phần tử đường dẫn trong đồ họa. Nó được định nghĩa là, g.selectAll (“đường dẫn”). Sau đó, chúng tôi sẽ lấy dữ liệu xác định các quốc gia từ tệp TopoJSON.
.data(topojson.object(topology, topology.objects.states)
.geometries)Cuối cùng, chúng tôi sẽ thêm nó vào dữ liệu mà chúng tôi sẽ hiển thị bằng cách sử dụng .enter() và sau đó chúng tôi nối dữ liệu đó dưới dạng các phần tử đường dẫn bằng cách sử dụng .append(“path”) phương pháp.