javascript - 使用 d3.js 绘制等值线 map

Question

我是 d3.js 新手。我正在尝试从头开始创建此分区统计图:

我的脚本没有显示错误，在元素选项卡中我可以看到数据，但屏幕上没有显示任何内容。我已阅读多个文档，但仍然不知道我缺少什么。

jsfiddle: https://jsfiddle.net/jx3hjfgw

    var width = 960,
    height = 1160;

// SVG element as a JavaScript object that we can manipulate later
var svg = d3.select("#map").append("svg")
      .attr("width", width)
      .attr("height", height);

var center = [24.679341, 46.680381];

// Instantiate the projection object
var projection = d3.geo.conicConformal()
      .center(center)
      .clipAngle(180)
          // Size of the map itself, you may want to play around with this in
          // relation to your canvas size
      .scale(10000)
          // Center the map in the middle of the canvas
      .translate([width / 2, height / 2])
      .precision(.1);

// Assign the projection to a path
var path = d3.geo.path().projection(projection);

d3.json("https://code.highcharts.com/mapdata/countries/sa/sa-all.geo.json", function(err, data) {
  $.each(data.features, function(i, feature) {
    svg.append("path")
      .datum(feature.geometry)
      .attr("class", "border")
      .attr("stroke", "black")
      .attr("fill", "blue");
  });
});

Answer 1

您的 map 存在一些问题。

主要问题是您的投影不是 WGS84，也就是说它不包含经度/纬度对。 geojson 的投影在 geojson 本身中指定:

"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG:32638"}}

CRS代表空间引用系统

此投影 (EPSG:32638) 是一个 UTM 系统。 D3 使用未投影的数据(或“投影”到 WGS84 的数据)、三维椭球上的点，而不是平面网格上已投影的点(如 UTM)。如果 geojson 没有指示它使用的投影，您仍然可以知道它不是 WGS84 或经纬度对，因为坐标不是有效的经度/纬度:

...[1348,4717],[1501,4754],[1572,4753]...

您有两种选择，一种是使用未投影的数据(或 WGS84 中的数据)并围绕 d3 投影构建 map 。另一种是使用 geo.transform 来显示您的数据。

解决方案1

正如其他答案中所述，您需要使用 path 函数来实际显示数据，您也不应该需要 d3 中的每个循环来附加功能

要使此解决方案发挥作用，而且它可能是最直接的，您需要重新投影/取消投影您拥有的 geojson(使用 d3 以外的其他工具)，或者，您'您必须找到一个新的数据源(这可能不太困难)，其中空间数据表示为长/纬度对。

另请注意，geojson 和 d3 中的坐标为 [long,lat]，因此您的中心坐标 [24.679341, 46.680381] 指的是北纬 46.7 度，东经 24.7 度 - 该点是不在沙特阿拉伯，而是在罗马尼亚。

查看适合沙特阿拉伯的示例投影 here (使用基本的 geojson - 只是国家轮廓)(在 d3v4 中 - 与 v3 略有不同)。

加在一起，这会给你一些像的东西:

var projection = d3.geo.mercator()
      .center([46.680381,24.679341])
      .scale(1000)
      .translate([width / 2, height / 2])
      .precision(.1);

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

d3.json("source.json", function(err, data) {
    svg.selectAll("path")
      .data(data.features)
      .enter()
      .append('path')
      .attr("class", "border")
      .attr("stroke", "black")
      .attr("fill", "blue")
      .attr("d", path);
  });

请注意，如果您确实想保留圆锥形投影 (d3.geo.conicConformal())，请查看以该类型投影为中心 here ，它适用于阿尔伯斯投影，但方法是相同的，因为它们都是同一类型的圆锥投影。

解决方案2

另一个选项是使用 geo.transfrom 它将转换和缩放您的数据(因为在这种情况下它已经是平面的)以匹配您所需的 View 。这种方法的缺点是您不能使用纬度/经度点来指示任何内容 - map 单位将是投影单位，而 map 单位不是经度或纬度。

目标是平移/缩放/移动坐标，例如:

...[1348,4717],[1501,4754],[1572,4753]...

到 SVG 范围内的 [x,y] 像素值。

这更复杂，您可以尝试手动计算翻译(就像我在 this bl.ock 中用您的数据演示的那样，(使用 d3v4，其方法名称略有不同，但对于此类操作来说是相同的) )，或使用自动化函数来确定您需要使用的适当转换。