【问题标题】：GeoJSON in D3: Paths aren't being bound to dataD3 中的 GeoJSON：路径未绑定到数据
【发布时间】：2016-08-20 07:29:54
【问题描述】：

详情：

我有下面的设置。生成的自定义topjson文件，只是想在我的网页中显示。我可以在控制台中看到，已创建并正确加载了数据，但由于某种原因 d3 没有呈现任何路径元素并且没有显示任何内容。

Javascript

var width = 960;
    var height = 500;


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


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


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

        d3.json('http://localhost.com/calgary.json', function(error, calgary) {
        svg.append('path')
        .datum(topojson.feature(calgary))
        .attr('d', path)
        .attr('fill','red');
        });

自定义 Topojson 文件：

http://pastebin.com/ere2Ww7K

依赖项：

<script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>

【问题讨论】：

控制台是否出现任何错误？

标签： d3.js jquery-svg

【解决方案1】：

对我来说，您的代码中似乎有两个错误：
首先，在json加载时调用的函数内部，datum内部的topojson调用需要两个参数，第二个是一个对象：

.datum(topojson.feature(calgary, calgary.objects.CALGIS_ATS_SECTIONS))

其次，您的 topojson 文件似乎已损坏。在第一次更正之后，我看到了一些东西，但它只是一堆多边形，填充了一个大矩形。

我尝试使用有效的 topojson 文件（即http://bl.ocks.org/mbostock/raw/4090846/us.json）进行相同的调用，将之前调用中的“CALGIS_ATS_SECTIONS”替换为“land”，并且运行起来非常顺利。

【讨论】：