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 |
`