D3.js - ภูมิศาสตร์
พิกัดเชิงพื้นที่มักใช้สำหรับข้อมูลสภาพอากาศหรือประชากร D3.js มีเครื่องมือสามอย่างสำหรับข้อมูลทางภูมิศาสตร์ -
Paths - สร้างพิกเซลสุดท้าย
Projections - เปลี่ยนพิกัดทรงกลมเป็นพิกัดคาร์ทีเซียนและ
Streams - พวกเขาเร่งความเร็ว
ก่อนที่จะเรียนรู้ว่าภูมิศาสตร์ใน D3.js คืออะไรเราควรเข้าใจคำศัพท์สองคำต่อไปนี้ -
- D3 Geo Path และ
- Projections
ให้เราหารือเกี่ยวกับคำศัพท์ทั้งสองนี้โดยละเอียด
เส้นทางภูมิศาสตร์ D3
มันเป็นตัวสร้างเส้นทางภูมิศาสตร์ GeoJSON สร้างสตริงข้อมูลเส้นทาง SVG หรือแสดงเส้นทางไปยัง Canvas ขอแนะนำ Canvas สำหรับการคาดการณ์แบบไดนามิกหรือเชิงโต้ตอบเพื่อปรับปรุงประสิทธิภาพ ในการสร้าง D3 Geo Path Data Generator คุณสามารถเรียกใช้ฟังก์ชันต่อไปนี้
d3.geo.path()
ที่นี่ d3.geo.path() ฟังก์ชันตัวสร้างเส้นทางช่วยให้เราสามารถเลือกแผนที่ฉายที่เราต้องการใช้สำหรับการแปลจากพิกัดภูมิศาสตร์เป็นพิกัดคาร์ทีเซียน
ตัวอย่างเช่นหากเราต้องการแสดงรายละเอียดแผนที่ของอินเดียเราสามารถกำหนดเส้นทางดังที่แสดงด้านล่าง
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))
ประมาณการ
การคาดการณ์จะเปลี่ยนรูปทรงเรขาคณิตหลายเหลี่ยมทรงกลมให้เป็นรูปเรขาคณิตเหลี่ยมเชิงระนาบ D3 มีการใช้งานการฉายภาพต่อไปนี้
Azimuthal - การคาดการณ์ของ Azimuthal จะฉายทรงกลมลงบนเครื่องบินโดยตรง
Composite - คอมโพสิตประกอบด้วยการคาดการณ์หลายอย่างที่ประกอบเป็นจอแสดงผลเดียว
Conic - ฉายทรงกลมลงบนกรวยแล้วคลายกรวยลงบนระนาบ
Cylindrical - เส้นโครงทรงกระบอกจะฉายทรงกลมลงบนทรงกระบอกที่บรรจุแล้วคลายทรงกระบอกลงบนระนาบ
ในการสร้างการฉายภาพใหม่คุณสามารถใช้ฟังก์ชันต่อไปนี้
d3.geoProjection(project)
สร้างการฉายภาพใหม่จากโครงการฉายดิบที่ระบุ ฟังก์ชันโปรเจ็กต์รับลองจิจูดและละติจูดของจุดที่กำหนดเป็นเรเดียน คุณสามารถใช้การคาดการณ์ต่อไปนี้ในรหัสของคุณ
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);
ที่นี่เราสามารถใช้การคาดการณ์ใด ๆ ข้างต้น ให้เราพิจารณาโดยสังเขปของการคาดการณ์เหล่านี้
d3.geo.orthographic()- การฉายภาพออร์โธกราฟิกเป็นการฉายภาพแนวราบที่เหมาะสำหรับการแสดงซีกโลกเดียว มุมมองที่ไม่มีที่สิ้นสุด
d3.geo.gnomonic() - การฉายภาพ gnomonic คือการฉายภาพแนวราบที่ฉายภาพวงกลมขนาดใหญ่เป็นเส้นตรง
d3.geo.equirectangular()- รูปทรงเท่ากันเป็นการฉายภาพทางภูมิศาสตร์ที่ง่ายที่สุด ฟังก์ชันเอกลักษณ์ ไม่ใช่ทั้งพื้นที่เท่ากันหรือตามรูปแบบ แต่บางครั้งก็ใช้สำหรับข้อมูลแรสเตอร์
d3.geo.mercator() - การฉายภาพ Spherical Mercator มักใช้กับไลบรารีการทำแผนที่แบบเรียงต่อกัน
d3.geo.transverseMercator() - การฉายภาพ Transverse Mercator
ตัวอย่างการทำงาน
ให้เราสร้างแผนที่ของอินเดียในตัวอย่างนี้ ในการดำเนินการนี้เราควรปฏิบัติตามขั้นตอนต่อไปนี้
Step 1 - Apply styles - ให้เราเพิ่มสไตล์ในแผนที่โดยใช้รหัสด้านล่าง
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>
ที่นี่เราได้ใช้สีเฉพาะสำหรับรัฐ TN, AP และ MP
Step 2 - Include topojson script - TopoJSON เป็นส่วนขยายของ GeoJSON ที่เข้ารหัสโทโพโลยีซึ่งกำหนดไว้ด้านล่าง
<script src = "http://d3js.org/topojson.v0.min.js"></script>
เราสามารถรวมสคริปต์นี้ไว้ในการเข้ารหัสของเรา
Step 3 - Define variables - เพิ่มตัวแปรในสคริปต์ของคุณโดยใช้โค้ดด้านล่าง
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);
ที่นี่ความกว้าง SVG คือ 600 และความสูง 400 หน้าจอเป็นพื้นที่สองมิติและเรากำลังพยายามนำเสนอวัตถุสามมิติ ดังนั้นเราสามารถบิดเบือนขนาดที่ดิน / รูปร่างอย่างน่าเศร้าโดยใช้d3.geo.mercator() ฟังก์ชัน
ศูนย์ถูกระบุ [78, 22] ซึ่งจะตั้งค่าศูนย์กลางของการฉายภาพไปยังตำแหน่งที่ระบุเป็นอาร์เรย์สององค์ประกอบของลองจิจูดและละติจูดเป็นองศาและส่งกลับการฉายภาพ
ที่นี่แผนที่มีศูนย์กลางอยู่ที่ 78 องศาตะวันตกและ 22 องศาเหนือ
มาตราส่วนระบุเป็น 680 ซึ่งจะตั้งค่าตัวคูณมาตราส่วนของการฉายภาพเป็นค่าที่ระบุ หากไม่ได้ระบุมาตราส่วนจะส่งกลับค่าตัวคูณมาตราส่วนปัจจุบันซึ่งมีค่าเริ่มต้นเป็น 150 สิ่งสำคัญที่ต้องสังเกตว่าปัจจัยมาตราส่วนไม่สอดคล้องกันในการประมาณการ
Step 4 - Append SVG - ต่อท้ายแอตทริบิวต์ SVG
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
Step 5 - Create path - ส่วนของโค้ดต่อไปนี้จะสร้างตัวสร้างเส้นทางภูมิศาสตร์ใหม่
var path = d3.geo.path()
.projection(projection);
ที่นี่ตัวสร้างเส้นทาง (d3.geo.path ()) ใช้เพื่อระบุประเภทการฉายภาพ (.projection) ซึ่งกำหนดไว้ก่อนหน้านี้ว่าเป็นการฉายภาพ Mercator โดยใช้การฉายแบบตัวแปร
Step 6 - Generate data - indiatopo.json - ไฟล์นี้มีบันทึกมากมายซึ่งเราสามารถดาวน์โหลดได้อย่างง่ายดายจากไฟล์แนบต่อไปนี้
ดาวน์โหลด indiatopo.json file
หลังจากดาวน์โหลดไฟล์แล้วเราสามารถเพิ่มตำแหน่ง D3 ของเราได้ รูปแบบตัวอย่างแสดงด้านล่าง
{"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 - ตอนนี้อ่านข้อมูลจากไฟล์ indiatopo.json ไฟล์และวาดแผนที่
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)
});
ที่นี่เราจะโหลดไฟล์ TopoJSON พร้อมพิกัดสำหรับแผนที่อินเดีย (indiatopo.json) จากนั้นเราขอประกาศว่าเราจะดำเนินการกับองค์ประกอบเส้นทางทั้งหมดในกราฟิก มันถูกกำหนดเป็น g.selectAll (“ path”) จากนั้นเราจะดึงข้อมูลที่กำหนดประเทศจากไฟล์ TopoJSON
.data(topojson.object(topology, topology.objects.states)
.geometries)
สุดท้ายเราจะเพิ่มลงในข้อมูลที่เราจะแสดงโดยใช้ .enter() วิธีการแล้วเราผนวกข้อมูลนั้นเป็นองค์ประกอบเส้นทางโดยใช้ .append(“path”) วิธี.