d3.js 我应该如何使用我的投影在Map上绘制点？

kokeuurv 于 2023-06-23 发布在其他

关注(0)|答案(1)|浏览(138)

我试着在Map上画一些圆圈，根据经度和纬度，然而，我认为我的投影有问题，因为它没有画出我的任何东西。
我得到了以下信息
我有一个全局变量
var projection = 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]
        })

d3.js

来源：https://stackoverflow.com/questions/74773725/how-should-i-be-using-my-projection-to-draw-points-in-the-map

1条答案

按热度按时间

3phpmpom1#

很难说哪里出了问题，因为我们看不到你的数据，也不知道它与你的预测是否相符。在我看来，你调用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>

赞(0）回复(0）举报 2023-06-23

我来回答

d3.js 我应该如何使用我的投影在Map上绘制点？

1条答案

相关问题

热门标签

最新问答