关于d3.js:浏览器中未绘制topojson的路径

Path of topojson not drawn in browser

我想显示带有d3的地图,但在浏览器中未绘制路径,尽管在开发人员工具中,我看到topojson文件已加载,因此该路径有数据。 我刚得到一张空白页。 可能是什么问题呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-linecap: round;
}

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


var width = 960,
height = 600;

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("build/immoscout.topojson", function(error, us) {
  if (error) return console.error(error);

  svg.append("path")
      .datum(topojson.mesh(us))
      .attr("d", path);
});


是否基于Lars的评论回答了您的问题,"您正在调用.projection(null)。您需要在此处设置D3的投影之一"? 下面列出了一些投影选项。 您可能还需要检查并确保服务器可以运行.topojson文件。 请参阅如何允许使用ASP.NET下载.json文件

  • 扩展名:.json
  • MIME类型:application / json
  • 扩展名:.geojson
  • MIME类型:application / json
  • 扩展名:.topojson
  • MIME类型:application / json

1)Mollweide投影显示整个世界

1
2
3
4
5
6
var width = 500;
var height = 500;
var projection = d3.geo.mollweide()
    .scale(120)
    .translate([width / 2, height / 2]);
var geoPath = d3.geo.path().projection(projection);

2)墨卡托投影,已成为Google地图的标准

1
2
3
4
5
6
var width = 500;
var height = 500;
var aProjection = d3.geo.mercator()
        .scale(80)//80 works well in this case
        .translate([width / 2, height / 2]);
var geoPath = d3.geo.path().projection(aProjection);//d3.geo.path() defaults to albersUSA, which is a projection suitable only for maps of the United States

`