d3 v4 जियो उलटी सीमा खींचता है

Question

जब मैं एक एसवीजी तत्व में बरमूडा त्रिभुज खींचता हूं तो स्केल वह नहीं है जो मैं उम्मीद करता हूं (त्रिकोण को बॉक्स के किनारों तक बढ़ाया जाना चाहिए) और भरना पिछड़ा है (त्रिकोण को चित्रित करने के बजाय, यह त्रिभुज के साथ एक वर्ग खींचता है)।

var geojson = {
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Bermuda Triangle",
        "area": 1150180
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-64.73, 32.31],
            [-80.19, 25.76],
            [-66.09, 18.43],
            [-64.73, 32.31]
          ]
        ]
      }
    }
  ],
  "type":"FeatureCollection"
};

var width = 480;
var height = 480;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("style", "border: 2px solid black");

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

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

<script src="//d3js.org/d3.v4.js"></script>

मैं क्या गलत कर रहा हूं?

javascript d3.js svg geo

5

gregjhogan 11 नवम्बर 2017, 08:45

Answer 1

आइए इसे बदलें:

[
    [-64.73, 32.31],
    [-80.19, 25.76],
    [-66.09, 18.43],
    [-64.73, 32.31]
]

इसके लिए:

[
    [-64.73, 32.31],
    [-66.09, 18.43],
    [-80.19, 25.76],
    [-64.73, 32.31]
]

यह एक छोटे से परिवर्तन की तरह लगता है, लेकिन यह एक महत्वपूर्ण है: D3 बहुभुज के शीर्षों को घड़ी की दिशा में क्रम में अपेक्षित करता है।

API के अनुसार:

गोलाकार बहुभुजों को यह निर्धारित करने के लिए एक घुमावदार क्रम सम्मेलन की भी आवश्यकता होती है कि बहुभुज का कौन सा पक्ष अंदर है: एक गोलार्ध से छोटे बहुभुजों के लिए बाहरी रिंग घड़ी की दिशा में होनी चाहिए, जबकि एक गोलार्ध से बड़े बहुभुजों के लिए बाहरी रिंग होना चाहिए वामावर्त हो। (जोर मेरा)

साथ ही, यह Bostock (D3 निर्माता) द्वारा बनाया गया एक दिलचस्प bl.ocks है, जो आपकी समस्या को व्यावहारिक रूप से समझाता है: https:/ /bl.ocks.org/mbostock/a7bdfeb041e850799a8d3dce4d8c50c8

उस परिवर्तन के साथ आपका कोड यहां है (और fitSize को हटाकर):

var geojson = {
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Bermuda Triangle",
      "area": 1150180
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-64.73, 32.31],
          [-66.09, 18.43],
          [-80.19, 25.76],
          [-64.73, 32.31]
        ]
      ]
    }
  }],
  "type": "FeatureCollection"
};

var width = 480;
var height = 480;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("style", "border: 2px solid black");

var projection = d3.geoMercator();
var path = d3.geoPath().projection(projection);

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

<script src="//d3js.org/d3.v4.js"></script>

11

Gerardo Furtado 11 नवम्बर 2017, 09:24

Answer 2

अगर किसी को भी इसी तरह की समस्या दिखाई देगी, तो मैंने एक टूल बनाया है जो आपको जियोजोन को रिवाइंड या रिवर्स करने में मदद करेगा

इसने मुझे बिना किसी परेशानी के कुछ जियोसन फाइलों में बदलाव करने में मदद की

https://observablehq.com/@bumbeishvili/rewind-geojson

आप इसे एक स्निपेट के रूप में बस नीचे चला सकते हैं

<div class="notebook-content">
  
</div>

<script type="module"> 

import notebook from "https://api.observablehq.com/@bumbeishvili/rewind-geojson.js";  //  "download code" url

document.querySelector('.notebook-content').innerHTML =notebook.modules[0].variables
.filter(d=>d)
.map((d,i)=>` <div class=" observable-wrapper div-number-${i}"></div>`)
.join('')
.concat('<div style="display:none" class="hidden"></div>')


import {Inspector, Runtime} from "https://unpkg.com/@observablehq/runtime@3/dist/runtime.js"; 
let i=1;
Runtime.load(notebook, (variable) => { 
if(i==4 ){i++;  return new Inspector(document.querySelector(`.hidden`));}
if(i==13)return;
return new Inspector(document.querySelector(`.observable-wrapper:nth-child(${i++})`));
 }); 


</script>

3

bumbeishvili 2 सितंबर 2019, 21:00

d3 v4 जियो उलटी सीमा खींचता है

2 जवाब

नए सवाल