相关疑难解决方法(0)

缩放d3 v4地图以适合SVG(或根本不适合)

我试图让这个美国规模的地图变小.要么是我的SVG,要么是手动.

这是我最简单的代码:

function initializeMapDifferent(){
    var svg = d3.select("#map").append("svg")
        .attr("width", 1000)
        .attr("height", 500);



    d3.json("https://d3js.org/us-10m.v1.json", function (error, us){

        svg.append("g")
            .attr("class", "states")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.states).features)
            .enter().append("path")
            .attr("fill", "gray")
            .attr("d", d3.geoPath());
    });
}
Run Code Online (Sandbox Code Playgroud)

我尝试过类似的东西:

  var path = d3.geoPath()
  .projection(d3.geoConicConformal()
      .parallels([33, 45])
      .rotate([96, -39])
      .fitSize([width, height], conus));
Run Code Online (Sandbox Code Playgroud)

但每次我在路径变量中添加任何东西时,我都会从D3的内部部分得到NAN错误.谢谢你的帮助!

javascript svg geojson d3.js topojson

11
推荐指数
1
解决办法
2926
查看次数

d3 中的 Lambert 圆锥共形投影

我正在尝试在我的祖国奥地利的 SVG 地图上投影一组点([long, lat] 元组):

https://commons.wikimedia.org/wiki/File:Austria-geographic_map-blank.svg

维基媒体上对 SVG 文件的描述给出了投影名称和地图边界:

Lambert Conformal Conic,WGS84 数据
地图的地理范围:

西:17.2° W
东:9.3° W
北:49.2° N
南:46.0​​° N

虽然我很天真,但我认为这些信息足以用 D3 创建正确的投影。

这是我首先尝试的:

    let gcc = d3.geoConicConformal()
        .fitSize([width, height], bbox)
Run Code Online (Sandbox Code Playgroud)

哪里bbox是表示上面给出的地图边界的 GeoJSON 多边形。

不幸的是,结果不是正确的预测:

在此处输入图片说明

现在,通过阅读 D3 文档,我可以猜测我必须为投影指定更多参数,例如两个标准平行线。不幸的是,我不知道它们是什么,并且在地图的西部和东部边界周围尝试各种值都没有奏效。我认为它们可以从我对地图的了解中推导出来,或者可能不是?

其次,让我感到困惑的是,投影不仅旋转错误,而且缩放也不正确——我认为使用.fitSize会解决这个问题。

任何人都可以给我任何关于正确设置兰伯特圆锥共形投影的指示吗?

javascript projection map-projections d3.js

3
推荐指数
1
解决办法
630
查看次数