ฉันจะแสดงพิกัดละติจูด - ลองจิจูดบนแผนที่ด้วย D3 ได้อย่างไร

ฉันพยายามวางจุดพิกัดพิกัดละติจูด - ลองจิจูดไว้บนแผนที่สหรัฐอเมริกา

จนถึงตอนนี้ฉันได้พบตัวอย่างการทำแผนที่ของ D3แล้ว แต่เมื่อฉันพยายามวางจุดบน X พิกัดพิกเซล Y จะปรากฏขึ้นบนผ้าใบ ฉันพบบันทึกการบรรยายของ workThot ซึ่งรวมถึงระบบพิกัดใน d3แต่ฉันยังไม่แน่ใจว่าจะให้ละติจูด / ลองจิจูดยาวแสดงบนแผนที่ได้อย่างไร

นี่คือสิ่งที่ฉันมีจนถึงตอนนี้ (สวยมากเพียงแผนที่ของสหรัฐอเมริกา)

คำแนะนำเกี่ยวกับวิธีการทำให้งานนี้จะได้รับการชื่นชมอย่างมาก!

คุณต้องมีฟังก์ชั่นการฉาย () เพื่อฉายละติจูดและลองจิจูดของคะแนนของคุณบนแผนที่ ตามค่าเริ่มต้นพา ธ d3 geo ใช้การประมาณการ albersUsa ดังนั้นคุณสามารถประกาศได้อย่างชัดเจน:

var projection = d3.geo.albersUsa();

คุณจะเห็นสิ่งนี้ทำในตัวอย่างที่ไม่ได้ใช้ AlbersUsa และการกำหนดโปรเจคคุณสามารถแก้ไขได้ หากมีการกำหนดไว้จะทำให้สามารถใช้เป็นฟังก์ชันได้ วิธีนี้คุณสามารถวางคะแนนของคุณเป็นวงการ svg:

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

ที่ควรวางวงกลมในบริเวณที่ขรุขระของนิวยอร์ก จากนั้นคุณสามารถผูกข้อมูลที่มีแอตทริบิวต์ "lat" และ "long" เป็นกรณีซึ่งจะมีลักษณะดังนี้:

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

ฟังก์ชั่นการฉายจะใช้เวลา [long, lat] array และส่งคืนอาร์เรย์ [x, y] ซึ่งเหมาะสมกับการแปลงการแปลงไวยากรณ์ () หรือคุณสามารถแบ่งอาร์เรย์สำหรับค่า x และ y

ตัวอย่างด้านล่างวาง polys, เส้นและจุดและนำคะแนนจาก csv และฉายลงบนแผนที่ แต่สังเกตว่ามันเปลี่ยนองค์ประกอบ g และผนวกวงกลมบนองค์ประกอบนั้น (คุณอาจต้องการป้ายกำกับหรือด้านอื่น ๆ ไปยังไซต์ซึ่งทั้งหมดจะถูกผนวกเข้ากับองค์ประกอบ g ที่ฉายไว้):

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/