मैं D3 के साथ मैप पर अक्षांश-देशांतर निर्देशांक कैसे प्रस्तुत कर सकता हूं?

Question

मैं संयुक्त राज्य अमेरिका के नक्शे के शीर्ष पर देशांतर-अक्षांश निर्देशांक के मनमाने सेट के ओवरले डॉट्स की कोशिश कर रहा हूं।

अब तक मुझे डी 3 कार्टोग्राफी उदाहरण मिला है , लेकिन जब मैं एक्स पर डॉट्स लगाने की कोशिश करता हूं, तो वाई पिक्सेल निर्देशांक करते हैं कि वे कैनवास से बाहर निकलते हैं। मुझे वर्कशॉट लेक्चर नोट्स मिले, जिनमें डी 3 में समन्वित सिस्टम शामिल हैं , लेकिन मैं अभी भी अनिश्चित हूं कि मैप पर दिखाने के लिए लेट / लॉन्ग कॉर्ड कैसे प्राप्त करें।

यह वही है जो मैंने अभी तक किया है (सुंदर रूप से केवल यूएसए का एक नक्शा)

इस काम को करने के लिए सलाह की बहुत सराहना की जाएगी!

Comments

d3 svg सही है?

— Mapperz

हाँ, d3 svg है।

— जे टेलर

नक्शा करने के लिए svg प्रतिपादन का एक अच्छा उदाहरण यहाँ है - github.com/kartograph/kartograph.py/wiki/... पथ और माप का उपयोग कर

— Mapperz

Answer 1

आपको मानचित्र पर अपने बिंदुओं के अक्षांश और लंबे समय तक प्रोजेक्ट करने के लिए एक प्रक्षेपण () फ़ंक्शन की आवश्यकता है। डिफ़ॉल्ट रूप से, एक d3 जियो पथ एल्बरसुसा प्रक्षेपण का उपयोग करता है, इसलिए आप इसे स्पष्ट रूप से घोषित कर सकते हैं:

var projection = d3.geo.albersUsa();

आप इसे ऐसे उदाहरणों में देखते हैं जो अलबरसुसा का उपयोग नहीं करते हैं, और प्रक्षेपण को परिभाषित करके आप इसे संशोधित कर सकते हैं। इसे परिभाषित करने से यह एक फ़ंक्शन के रूप में उपलब्ध होता है। इस तरह आप अपने बिंदुओं को svg मंडलियों के रूप में रख सकते हैं:

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

यह न्यूयॉर्क के आसपास के क्षेत्र पर एक चक्र छोड़ देना चाहिए। फिर आप "अक्षांश" और "लंबे" विशेषताओं वाले डेटा को विशेषता के रूप में बाँध सकते हैं, जिस स्थिति में यह इस तरह दिखेगा:

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

प्रक्षेपण समारोह में [लंबा, लंबा] सरणी होता है और एक [x, y] सरणी देता है, जो रूपांतरण, अनुवाद () वाक्यविन्यास में ठीक बैठता है, या आप x और y मानों के लिए सरणी को विभाजित कर सकते हैं।

उदाहरण नीचे दिए गए स्थानों, रेखाओं और बिंदुओं को दर्शाते हैं, और एक csv से बिंदुओं को लेते हैं और उन्हें एक मानचित्र पर प्रोजेक्ट करते हैं, लेकिन ध्यान दें कि यह जी तत्व को बदल देता है और उस तत्व पर एक सर्कल जोड़ता है (आप एक लेबल या अन्य पहलुओं को भी चाह सकते हैं) एक साइट के लिए, जिसमें से सभी को अनुमानित प्रोजेक्ट तत्व में जोड़ा जाएगा):

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