डी 3 में एक मानचित्र को एक भू-ऑब्जेक्ट दिया गया है

Question

वर्तमान में d3 में यदि आपके पास जियोजन्स ऑब्जेक्ट है जिसे आप ड्रॉ करने जा रहे हैं तो आपको इसे स्केल करना होगा और इसे उस आकार में लाने के लिए अनुवाद करना होगा जिसे कोई चाहता है और इसे केंद्र में करने के लिए इसका अनुवाद कर सकता है। यह परीक्षण और त्रुटि का एक बहुत थकाऊ काम है, और मैं सोच रहा था कि क्या किसी को इन मूल्यों को प्राप्त करने का एक बेहतर तरीका पता था?

उदाहरण के लिए यदि मेरे पास यह कोड है

var path, vis, xy;
xy = d3.geo.mercator().scale(8500).translate([0, -1200]);

path = d3.geo.path().projection(xy);

vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600);

d3.json("../../data/ireland2.geojson", function(json) {
  return vis.append("svg:g")
    .attr("class", "tracts")
    .selectAll("path")
    .data(json.features).enter()
    .append("svg:path")
    .attr("d", path)
    .attr("fill", "#85C3C0")
    .attr("stroke", "#222");
});

मैं नरक कैसे प्राप्त कर सकता हूँ .scale (8500) और .translate ([0, -1200]) थोड़ा-थोड़ा करके बिना?

Comments

Se भी D3.geo: एक भू-ऑब्जेक्ट को दिए गए नक्शे को फ़्रेम करें?

— हगोलपेज़

Answer 1

निम्नलिखित आप क्या चाहते हैं लगभग करने के लिए लगता है। स्केलिंग ठीक लगती है। इसे मेरे मानचित्र पर लागू करते समय एक छोटा सा ऑफसेट होता है। यह छोटा ऑफसेट शायद इसलिए होता है क्योंकि मैं अनुवाद कमांड को मैप को सेंटर करने के लिए उपयोग करता हूं, जबकि मुझे शायद सेंटर कमांड का उपयोग करना चाहिए।

1. एक प्रक्षेपण और d3.geo.path बनाएं
2. वर्तमान प्रक्षेपण की सीमा की गणना करें
3. पैमाने और अनुवाद की गणना के लिए इन सीमाओं का उपयोग करें
4. प्रक्षेपण को फिर से बनाएँ

कोड में:

  var width  = 300;
  var height = 400;

  var vis = d3.select("#vis").append("svg")
      .attr("width", width).attr("height", height)

  d3.json("nld.json", function(json) {
      // create a first guess for the projection
      var center = d3.geo.centroid(json)
      var scale  = 150;
      var offset = [width/2, height/2];
      var projection = d3.geo.mercator().scale(scale).center(center)
          .translate(offset);

      // create the path
      var path = d3.geo.path().projection(projection);

      // using the path determine the bounds of the current map and use 
      // these to determine better values for the scale and translation
      var bounds  = path.bounds(json);
      var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
      var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
      var scale   = (hscale < vscale) ? hscale : vscale;
      var offset  = [width - (bounds[0][0] + bounds[1][0])/2,
                        height - (bounds[0][1] + bounds[1][1])/2];

      // new projection
      projection = d3.geo.mercator().center(center)
        .scale(scale).translate(offset);
      path = path.projection(projection);

      // add a rectangle to see the bound of the svg
      vis.append("rect").attr('width', width).attr('height', height)
        .style('stroke', 'black').style('fill', 'none');

      vis.selectAll("path").data(json.features).enter().append("path")
        .attr("d", path)
        .style("fill", "red")
        .style("stroke-width", "1")
        .style("stroke", "black")
    });

Comments

हे जान वान डेर लान मैंने इस प्रतिक्रिया के लिए आपको कभी धन्यवाद नहीं दिया। इस तरह से यह वास्तव में एक अच्छी प्रतिक्रिया है अगर मैं बाउंटी को अलग कर सकता हूं। इसके लिए धन्यवाद!

— पर्वतीय

यदि मैं इसे लागू करता हूं तो मुझे सीमा = अनंत मिलती है। यह कैसे हल किया जा सकता है पर कोई विचार?

— सिमके ने

@SimkeNys यह वही समस्या हो सकती है जैसा कि यहां बताया गया है stackoverflow.com/questions/23953366/… वहाँ बताए गए समाधान का प्रयास करें।

— जाॅन वैन डेर लान

हाय जान, आपके कोड के लिए धन्यवाद। मैंने कुछ जियोजोन डेटा के साथ आपके उदाहरण की कोशिश की लेकिन यह काम नहीं किया। क्या आप बता सकते हैं कि मैं क्या गलत कर रहा हूं? :) मैंने जियोसन डेटा अपलोड किया: onedrive.live.com/…

— user2644964

डी 3 वी 4 में प्रक्षेपण फिटिंग एक अंतर्निहित विधि है: projection.fitSize([width, height], geojson)( एपीआई डॉक्स ) - नीचे @dnltsk का उत्तर देखें।

— फ्लोरियन लेडरमैन

Answer 2

मेरा जवाब जन वैन डेर लाॅन के करीब है, लेकिन आप चीजों को थोड़ा सरल कर सकते हैं क्योंकि आपको भौगोलिक केन्द्रक की गणना करने की आवश्यकता नहीं है; आपको केवल बाउंडिंग बॉक्स की आवश्यकता है। और, एक अनकल्ड, अनट्रांसलेटेड यूनिट प्रोजेक्शन का उपयोग करके, आप गणित को सरल बना सकते हैं।

कोड का महत्वपूर्ण हिस्सा यह है:

// Create a unit projection.
var projection = d3.geo.albers()
    .scale(1)
    .translate([0, 0]);

// Create a path generator.
var path = d3.geo.path()
    .projection(projection);

// Compute the bounds of a feature of interest, then derive scale & translate.
var b = path.bounds(state),
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

// Update the projection to use computed scale & translate.
projection
    .scale(s)
    .translate(t);

इकाई प्रक्षेपण में सुविधा के बाउंडिंग बॉक्स की गणना करने के बाद, आप कैनवास ( और ) के पहलू अनुपात में बाउंडिंग बॉक्स ( और ) के पहलू अनुपात की तुलना करके उचित पैमाने की गणना कर सकते हैं । इस मामले में, मैंने 100% के बजाय 95% कैनवास को बाउंडिंग बॉक्स को बढ़ाया है, इसलिए स्ट्रोक और आस-पास की विशेषताओं या पैडिंग के लिए किनारों पर थोड़ा अतिरिक्त कमरा है।b[1][0] - b[0][0]b[1][1] - b[0][1]widthheight

तो फिर तुम गणना कर सकता है अनुवाद कर सीमांकन बॉक्स (के केंद्र का उपयोग कर (b[1][0] + b[0][0]) / 2और (b[1][1] + b[0][1]) / 2) और कैनवास (के केंद्र width / 2और height / 2)। ध्यान दें कि चूंकि बाउंडिंग बॉक्स यूनिट प्रोजेक्शन के निर्देशांक में है, इसलिए इसे स्केल ( s) से गुणा किया जाना चाहिए ।

उदाहरण के लिए, bl.ocks.org/4707858 :

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

उदाहरण के लिए, bl.ocks.org/4699541 :

Comments

मैं यह बताना चाहता हूं कि उपरोक्त कोड में कुछ त्रुटियां हैं, विशेष रूप से सीमाओं के सूचकांकों में। यह दिखना चाहिए: s = (0.95 / Math.max ((b [1] [0] - b [0] [0]) / चौड़ाई, (b [1] [1] - b [0] [0] ) / ऊंचाई)) * ५००, टी = [(चौड़ाई - एस * (बी [१] [०] + बी [०] [०]) / २, (ऊंचाई - एस * (बी [१]] १] + बी [०] [१]) / २];

— इरोस

@ इरोस - ऐसा लगता है कि * 500यहाँ बहुत अधिक है ... भी, पैमाने की गणना में b[1][1] - b[0][0]होना चाहिए b[1][1] - b[0][1]।

— nrabinowitz 20

बग रिपोर्ट: meta.stackexchange.com/questions/184140/…

— पाउलो स्कर्दिन

तो:b.s = b[0][1]; b.n = b[1][1]; b.w = b[0][0]; b.e = b[1][0]; b.height = Math.abs(b.n - b.s); b.width = Math.abs(b.e - b.w); s = .9 / Math.max(b.width / width, (b.height / height));

— हर्ब काडिल

यह इस तरह के एक समुदाय की वजह से है कि डी 3 इस तरह के एक खुशी के साथ काम करने के लिए है। बहुत बढ़िया!

— अर्चनाजुन

Answer 3

D3 v4 या v5 के साथ इसका रास्ता आसान हो रहा है!

var projection = d3.geoMercator().fitSize([width, height], geojson);
var path = d3.geoPath().projection(projection);

और अंत में

g.selectAll('path')
  .data(geojson.features)
  .enter()
  .append('path')
  .attr('d', path)
  .style("fill", "red")
  .style("stroke-width", "1")
  .style("stroke", "black");

आनंद लें, चीयर्स

Comments

मुझे आशा है कि यह उत्तर अधिक मतदान होगा। d3v4कुछ समय के लिए साथ काम किया और बस इस विधि की खोज की।

— मार्क

कहाँ gसे आता है? कि svg कंटेनर है?

— जैकलॉक्ना

Tschallacka टैग gहोना चाहिए<g></g>

— giankotarola

यह बहुत ही शर्मनाक है और 2 गुणवत्ता के उत्तर के बाद। यह याद रखना आसान है और यह स्पष्ट रूप से अन्य उत्तरों की तुलना में सरल है।

— कुर्त

धन्यवाद। V5 में भी काम करता है!

— चैतन्य बंगरा

Answer 4

मैं d3 में नया हूं - यह समझाने की कोशिश करूंगा कि मैं इसे कैसे समझता हूं लेकिन मुझे यकीन नहीं है कि मुझे सबकुछ सही मिला।

रहस्य यह जान रहा है कि कुछ तरीके कार्टोग्राफिक स्पेस (अक्षांश, देशांतर) और दूसरों को कार्टेशियन स्पेस (स्क्रीन पर x, y) पर संचालित करेंगे। कार्टोग्राफिक स्पेस (हमारा ग्रह) गोलाकार है (लगभग) गोलाकार, कार्टेशियन स्पेस (स्क्रीन) समतल है - क्रम में एक के ऊपर एक मैप करने के लिए आपको एक एल्गोरिथम की आवश्यकता होती है, जिसे प्रोजेक्शन कहा जाता है । यह स्थान अनुमानों के आकर्षक विषय में बहुत कम है और विमान में गोलाकार बारी करने के लिए वे भौगोलिक विशेषताओं को कैसे विकृत करते हैं; कुछ कोणों को संरक्षित करने के लिए डिज़ाइन किए गए हैं, अन्य लोग दूरी और इतने पर संरक्षण करते हैं - हमेशा एक समझौता होता है (माइक बोस्कॉक के पास उदाहरणों का एक बड़ा संग्रह है )।

डी 3 में, प्रोजेक्शन ऑब्जेक्ट में एक केंद्र संपत्ति / सेटर है, जो मानचित्र इकाइयों में दिया गया है:

projection.center ([स्थान])

यदि केंद्र निर्दिष्ट किया गया है, तो प्रक्षेपण के केंद्र को निर्दिष्ट स्थान पर सेट करें, एक दो-तत्व सरणी देशांतर और अक्षांश में डिग्री और प्रक्षेपण को लौटाता है। यदि केंद्र निर्दिष्ट नहीं है, तो वर्तमान केंद्र लौटाता है जो 00 °, 0 ° to से चूकता है।

पिक्सेल में दिया गया अनुवाद भी है - जहाँ प्रक्षेपण केंद्र कैनवास के सापेक्ष खड़ा है:

projection.translate ([बिंदु])

यदि बिंदु निर्दिष्ट है, तो प्रक्षेपण के अनुवाद को निर्दिष्ट दो-तत्व सरणी [x, y] पर सेट करता है और प्रक्षेपण को लौटाता है। यदि बिंदु निर्दिष्ट नहीं है, तो वर्तमान अनुवाद ऑफ़सेट को लौटाता है, जो कि चूक [480, 250] पर आ जाता है। अनुवाद ऑफसेट प्रक्षेपण के केंद्र के पिक्सेल निर्देशांक को निर्धारित करता है। डिफ़ॉल्ट अनुवाद ऑफ़सेट स्थानों को ,0 °, 0 ° × 960 × 500 क्षेत्र के केंद्र में रखता है।

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

उदाहरण के लिए, एक प्रक्षेपण और पथ:

var projection = d3.geo.mercator()
    .scale(1);

var path = d3.geo.path()
    .projection(projection);

boundsसे विधि pathरिटर्न बाउंडिंग बॉक्स पिक्सल में । इसका उपयोग सही पैमाने खोजने के लिए करें, मानचित्र इकाइयों में आकार के साथ पिक्सेल में आकार की तुलना (0.95 आपको चौड़ाई या ऊंचाई के लिए सबसे अच्छा फिट पर 5% मार्जिन देता है)। मूल ज्यामिति यहाँ, आयत चौड़ाई / ऊंचाई की गणना तिरछे विरोध वाले कोनों से की जाती है:

var b = path.bounds(feature),
    s = 0.9 / Math.max(
                   (b[1][0] - b[0][0]) / width, 
                   (b[1][1] - b[0][1]) / height
               );
projection.scale(s); 

d3.geo.boundsमानचित्र इकाइयों में बाउंडिंग बॉक्स को खोजने के लिए विधि का उपयोग करें :

b = d3.geo.bounds(feature);

बाउंडिंग बॉक्स के केंद्र के प्रक्षेपण का केंद्र निर्धारित करें:

projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);

translateमानचित्र के केंद्र को कैनवास के केंद्र में ले जाने के लिए विधि का उपयोग करें :

projection.translate([width/2, height/2]);

अब तक आपके पास 5% मार्जिन के साथ ज़ूम किए गए नक्शे के केंद्र में सुविधा होनी चाहिए।

Comments

कहीं कोई धब्बा तो नहीं है?

— हुगोलपेज़

सॉरी, नो ब्लॉक्स या जिस्ट, आप क्या करने की कोशिश कर रहे हैं? क्या यह क्लिक-टू-ज़ूम जैसा कुछ है? इसे प्रकाशित करें और मैं आपके कोड पर एक नज़र डाल सकता हूं।

— पाउलो स्कार्डिन

Bostock के उत्तर और चित्र bl.ocks.org उदाहरणों के लिंक प्रदान करते हैं जो मुझे इंजीनियर को एक पूरे कोड की प्रतिलिपि बनाने की अनुमति देते हैं। काम हो गया। +1 और आपके महान चित्रों के लिए धन्यवाद!

— हुगोलपज़

Answer 5

एक केंद्र () विधि है जिसका उपयोग आप एक लट्टू / लोन जोड़ी को स्वीकार कर सकते हैं।

मैं जो भी समझता हूं, अनुवाद () का उपयोग केवल मानचित्र के पिक्सल को सचमुच स्थानांतरित करने के लिए किया जाता है। मैं निश्चित नहीं हूं कि यह कैसे निर्धारित किया जाए कि कौन सा पैमाना है।

Comments

यदि आप TopoJSON का उपयोग कर रहे हैं और पूरे मानचित्र को केंद्र में रखना चाहते हैं, तो आप JSON ऑब्जेक्ट में एक bbox विशेषता को शामिल करने के लिए --bbox के साथ topojson चला सकते हैं। केंद्र के लिए lat / lon निर्देशांक होना चाहिए [(b [0] + b [2]) / 2, (b [1] + b [3]) / 2] (जहाँ b का bbox मान है)।

— पाउलो स्कार्डिन

Answer 6

केंद्र के अतिरिक्त d3 में एक भू-ऑब्जेक्ट दिए गए नक्शे पर ध्यान दें, यदि आप अपनी वस्तु की सीमा के आसपास एक पैडिंग निर्दिष्ट करना चाहते हैं fitExtent(), fitSize()तो आप इसे पसंद कर सकते हैं । fitSize()स्वचालित रूप से इस पैडिंग को 0 पर सेट करता है।

Answer 7

मैं अपने नक्शे को केंद्रित करने के लिए इंटरनेट पर आस-पास के रास्ते को देख रहा था, और जान वैन डेर लान और mbostock के उत्तर से प्रेरित हो गया। यदि आप svg के लिए कंटेनर का उपयोग कर रहे हैं तो यहां jQuery का उपयोग करना एक आसान तरीका है। मैंने पैडिंग / बॉर्डर आदि के लिए 95% की सीमा बनाई।

var width = $("#container").width() * 0.95,
    height = $("#container").width() * 0.95 / 1.9 //using height() doesn't work since there's nothing inside

var projection = d3.geo.mercator().translate([width / 2, height / 2]).scale(width);
var path = d3.geo.path().projection(projection);

var svg = d3.select("#container").append("svg").attr("width", width).attr("height", height);

यदि आप सटीक स्केलिंग की तलाश कर रहे हैं, तो यह उत्तर आपके लिए काम नहीं करेगा। लेकिन अगर मेरी तरह, आप एक मानचित्र प्रदर्शित करना चाहते हैं जो एक कंटेनर में केंद्रीकृत हो, तो यह पर्याप्त होना चाहिए। मैं व्यापारी मानचित्र प्रदर्शित करने की कोशिश कर रहा था और पाया कि यह विधि मेरे मानचित्र को केंद्रीयकृत करने में उपयोगी थी, और मैं आसानी से अंटार्कटिक हिस्से को काट सकता था क्योंकि मुझे इसकी आवश्यकता नहीं थी।

Answer 8

मानचित्र को पैन / ज़ूम करने के लिए आपको एसवीजी को ओवरलेइंग पर देखना चाहिए। यह एसवीजी को बदलने से बहुत आसान होगा। इस उदाहरण को देखें http://bost.ocks.org/mike/leaflet/ और फिर पत्रक में मानचित्र केंद्र को कैसे बदलें

Comments

यदि अन्य निर्भरता को जोड़ा जाए तो चिंता का विषय है, पैन और ZOOM को शुद्ध d3 में आसानी से किया जा सकता है, देखें stackoverflow.com/questions/17093614/…

— Paulo Scardine

यह उत्तर वास्तव में d3 के साथ व्यवहार नहीं करता है। आप नक्शे को d3 में भी पैन / ज़ूम कर सकते हैं, पत्रक आवश्यक नहीं है। (बस यह एक पुरानी पोस्ट का एहसास था, बस जवाब ब्राउज़ कर रहा था)

— JARRRRG

Answer 9

Mbostocks के उत्तर और हर्ब कॉडिल की टिप्पणी के साथ, मैं अलास्का के साथ मुद्दों में भागना शुरू कर दिया था क्योंकि मैं एक व्यापारी प्रक्षेपण का उपयोग कर रहा था। मुझे ध्यान देना चाहिए कि अपने स्वयं के उद्देश्यों के लिए, मैं यूएस राज्यों को प्रोजेक्ट और केंद्र करने की कोशिश कर रहा हूं। मैंने पाया कि मुझे जन वैन डेर लान के उत्तर के साथ पॉलीगोन के लिए दो अपवादों के साथ शादी करनी थी, जो कि गोलार्ध को ओवरलैप करते हैं (पॉलीगॉन जो पूर्व - पश्चिम के लिए एक निरपेक्ष मान के साथ समाप्त होता है) 1 से अधिक है:

1. व्यापारी में एक सरल प्रक्षेपण सेट करें:

   प्रोजेक्शन = d3.geo.mercator ()। स्केल (1) .translate ([0,0]);

2. पथ बनाएँ:

   path = d3.geo.path ()। प्रोजेक्शन (प्रक्षेपण);

3. मेरी सीमाएँ शुरू करें:

var bounds = path.bounds(topoJson),
  dx = Math.abs(bounds[1][0] - bounds[0][0]),
  dy = Math.abs(bounds[1][1] - bounds[0][1]),
  x = (bounds[1][0] + bounds[0][0]),
  y = (bounds[1][1] + bounds[0][1]);

अलास्का और राज्यों कि गोलार्द्धों ओवरलैप के लिए 4.Add अपवाद:

if(dx > 1){
var center = d3.geo.centroid(topojson.feature(json, json.objects[topoObj]));
scale = height / dy * 0.85;
console.log(scale);
projection = projection
    .scale(scale)
    .center(center)
    .translate([ width/2, height/2]);
}else{
scale = 0.85 / Math.max( dx / width, dy / height );
offset = [ (width - scale * x)/2 , (height - scale * y)/2];

// new projection
projection = projection                     
    .scale(scale)
    .translate(offset);
}

आशा है कि ये आपकी मदद करेगा।

Answer 10

जो लोग वर्टिकल एट हॉरिजेंट को एडजस्ट करना चाहते हैं, उनके लिए यहां समाधान है:

  var width  = 300;
  var height = 400;

  var vis = d3.select("#vis").append("svg")
      .attr("width", width).attr("height", height)

  d3.json("nld.json", function(json) {
      // create a first guess for the projection
      var center = d3.geo.centroid(json)
      var scale  = 150;
      var offset = [width/2, height/2];
      var projection = d3.geo.mercator().scale(scale).center(center)
          .translate(offset);

      // create the path
      var path = d3.geo.path().projection(projection);

      // using the path determine the bounds of the current map and use 
      // these to determine better values for the scale and translation
      var bounds  = path.bounds(json);
      var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
      var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
      var scale   = (hscale < vscale) ? hscale : vscale;
      var offset  = [width - (bounds[0][0] + bounds[1][0])/2,
                        height - (bounds[0][1] + bounds[1][1])/2];

      // new projection
      projection = d3.geo.mercator().center(center)
        .scale(scale).translate(offset);
      path = path.projection(projection);

      // adjust projection
      var bounds  = path.bounds(json);
      offset[0] = offset[0] + (width - bounds[1][0] - bounds[0][0]) / 2;
      offset[1] = offset[1] + (height - bounds[1][1] - bounds[0][1]) / 2;

      projection = d3.geo.mercator().center(center)
        .scale(scale).translate(offset);
      path = path.projection(projection);

      // add a rectangle to see the bound of the svg
      vis.append("rect").attr('width', width).attr('height', height)
        .style('stroke', 'black').style('fill', 'none');

      vis.selectAll("path").data(json.features).enter().append("path")
        .attr("d", path)
        .style("fill", "red")
        .style("stroke-width", "1")
        .style("stroke", "black")
    });

Answer 11

मैंने एक टोपोजोन को कैसे केंद्रित किया, जहां मुझे फीचर को खींचने की जरूरत थी:

      var projection = d3.geo.albersUsa();

      var path = d3.geo.path()
        .projection(projection);


      var tracts = topojson.feature(mapdata, mapdata.objects.tx_counties);

      projection
          .scale(1)
          .translate([0, 0]);

      var b = path.bounds(tracts),
          s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
          t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

      projection
          .scale(s)
          .translate(t);

        svg.append("path")
            .datum(topojson.feature(mapdata, mapdata.objects.tx_counties))
            .attr("d", path)