Question

我是d3.js的新手。我试图从头开始创建这个等值区域地图：

我的脚本显示没有错误，在元素标签中我可以看到数据，但屏幕上没有显示任何内容。我已阅读多份文件，但仍然不知道我错过了什么。

的jsfiddle： https://jsfiddle.net/jx3hjfgw

object : View.OnClickListener {
    override fun onClick(v: View) {...}
})

Answer 1

您的地图存在一些问题。

主要问题是您的投影不是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投影构建地图。另一种方法是使用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来翻译和缩放数据（因为在这种情况下它已经是平面的）以匹配您想要的视图。这种方法的缺点是你不能使用纬度/经度点来指示任何东西 - 地图单位将是投影单位而地图单位不是度经度或纬度。

目标是翻译/缩放/移动坐标，例如：

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

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

这更复杂，您可以尝试手动找出翻译（就像我在this bl.ock中使用您的数据进行演示一样）（使用d3v4，其方法名称略有不同，但对于此类型则相同操作），或使用自动功能确定您需要使用的适当变换。

Answer 2

将您的上一个功能更改为此

svg.append("path")
      .data(feature.geometry)
      .attr("d", path)
      .attr("class", "border")
      .attr("stroke", "black")
      .attr("fill", "blue");

Answer 3

我认为你geojson档

有问题

我已将其上传到github，它会自动检测geojson内容并将其显示为地图。您可以看到只显示一行

正如已经指出的那样，您没有为d

定义path属性

我已更新您的fiddle以匹配Github结果：

＆＃13;

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.mercator()
      .center(center)
      .clipAngle(180)
          // Size of the map itself, you may want to play around with this in
          // relation to your canvas size
      .scale(1000)
          // 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://raw.githubusercontent.com/bumbeishvili/Assets/master/Other/junk/sa-all.geo.json", function(err, data) {
debugger;
  
  svg.selectAll('path')
      .data(data.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class", "border")
      .attr("stroke", "black")
      .attr("fill", "blue");
      
});

＆＃13;

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<div id="map"></div>

＆＃13;

使用d3.js的等值线图

3 个答案: