Question

我想用d3显示地图但是路径没有在浏览器中绘制，尽管在开发人员工具中我看到topojson文件已加载，因此路径有数据。我只是得到一个空白页面。可能是什么问题？

<!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>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

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);
});

Answer 1

你的问题是根据Lars的评论回答的，“你正在调用.projection（null）。你需要在那里设置一个D3的预测”吗？下面列出的投影选项很少。您可能还需要检查并确保您的服务器可以运行.topojson文件。见How to allow download of .json file with ASP.NET

扩展名：.json
MIME类型：application / json

扩展名：.geojson
MIME类型：application / json

扩展名：.topojson
MIME类型：application / json

1）Mollweide投影显示整个世界

"dos2unix"

2）墨卡托投影，已成为Google地图使用的标准

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);

`

topojson的路径未在浏览器中绘制

1 个答案: