Question

尝试在此处遵循这个简单的地图教程：https://bost.ocks.org/mike/map/

使用纽约地图数据在nyc的开放数据页面上找到（我使用Boro Boundries json和NHood Names json）

我已成功转换了json，因此我正在使用this json

当我进入本教程的第2步时，svg似乎没有呈现，我无法弄清楚原因。我可以看到＆＃34;路径＆＃34;打开检查器时它创建的对象，但是它的大小（0,0）。我顺便在MAMP本地运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
<style>

</style>
</head>
<body>
    <script type="text/javascript">
        var width = 960,
            height = 1160;

        var projection = d3.geo.mercator()
            .scale(500)
            .translate([width / 2, height / 2]);


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

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


        d3.json("ny.json", function(error, ny) {
          var nyhood = topojson.feature(ny, ny.objects.nyhood);
          svg.append("path")
              .datum(nyhood)
              .attr("d", path);
        });

    </script>
</body>
</html>

我不太确定我错过了什么，但我也尝试了使用Albers而不是Mercator的教程部分，唯一的结果是该对象填充了路径数据，并且页面上的路径大小要大得多，但仍然没有渲染svg。

Topojson地图不在d3中渲染

0 个答案: