我應該如何使用我的投影在 map 中繪制點？

Question

我試圖根據經度和緯度在 map 上畫一些圓圈，但是，我認為我的投影有問題，因為它沒有畫出我的任何東西。

我得到以下，

我有一個全局變量

變種投影= d3.geoMercator（）

然后，我定義投影：

  projection.scale(1).translate([0, 0]);
      var b = path.bounds(data);
      var s = .95 / Math.max((b[1][0] - b[0][0]) / mwidth, (b[1][1] -
              b[0][1]) / mheight);
      var t = [(mwidth - s * (b[1][0] + b[0][0])) / 2, (mheight - s *
              (b[1][1] + b[0][1])) / 2+50];
      projection.scale(s).translate(t); 

這就是我試圖實現我的圈子的方式，

 // Hospital points
     svg.selectAll('.hospital-circle')
        .data(hospitals)
        .enter()
        .append('circle')
        .attr('class', 'boundary')
        .attr('r', 5)
        .attr('cx', function(d) {
              var hospitalCoords = projection.scale(s).translate(t)([d.lon, d.lat])
              console.log(d)
              console.log(hospitalCoords);
              return hospitalCoords[0]
        })
        .attr('cy', function(d) {
              var hospitalCoords = projection.scale(s).translate(t)([d.lon, d.lat])
              console.log(d)
              console.log(hospitalCoords)
              return hospitalCoords[1]
        })

Answer 1

很難確定哪里出了問題，因為我們看不到您的數據，也不知道它與您的預測是否吻合。 在我看來，您正確地調用了projection ，但它可能無法正確地與您所在的區域相匹配。 您可能應該使用projection.fitSize ，而不是嘗試手動執行此操作。 我附上了一個完整的、有效的代碼片段來說明

 let w = 500; let h = 300; let div = d3.select('#container'); let svg = div.append('svg').attr('width', w).attr('height', h); let map = svg.append('g'); let largest_cities = d3.csvParse(`name,population,lat,lon New York City,8550405,40.6642738,-73.9385004 Los Angeles,3971883,34.0193936,-118.4108248 Chicago,2720546,41.8375511,-87.6818441 Houston,2296224,29.7804724,-95.3863425 Phoenix,1563025,33.5721625,-112.0879662 Philadelphia,1567442,40.0093755,-75.1333459 San Antonio,1469845,29.4724026,-98.5251419 San Diego,1394928,32.8152995,-117.134993 Dallas,1300092,32.794176,-96.7655033 San Jose,1026908,37.2968672,-121.8193058 Austin,931830,30.3071816,-97.7559964 Jacksonville,868031,30.3370193,-81.6613021 San Francisco,864816,37.759881,-122.437392 Columbus,850106,39.9847989,-82.9850438 Fort Worth,833319,32.7795423,-97.3463354 Indianapolis,858325,39.7779954,-86.1458378 Charlotte,827097,35.2087069,-80.8307389 Seattle,684451,47.6204993,-122.3508761 Denver,682545,39.7618487,-104.8806251 Washington,672228,38.9041485,-77.0170942 `, d3.autoType); let max_pop = d3.max(largest_cities.map((c) => c.population)); fetch('https://raw.githubusercontent.com/scdoshi/us-geojson/master/geojson/nation/US.geojson').then(async function(response) { let us = await response.json(); let projection = d3.geoAlbersUsa().fitSize([w, h], us); let path = d3.geoPath().projection(projection); map.append('path').attr("d", path(us)).attr("fill", "lightgray").attr("stroke", "#fff").attr("stroke-width", 1); largest_cities.forEach(function (c) { let xy = projection([c.lon, c.lat]); c.x = xy[0]; c.y = xy[1]; }); map.selectAll("circle").data(largest_cities).join("circle").attr("cx", (c) => c.x).attr("cy", (c) => c.y).attr("r", (c) => 5 * (c.population / max_pop) ** 0.3).attr("fill", "black").attr("fill-opacity", 0.5).attr("stroke", "black") })

 <script src="https://d3js.org/d3.v7.min.js"></script> <div id="container"></div>