D3.js 如何使用d3在传单中显示topojson层？_D3.js_Leaflet_Topojson

D3.js 如何使用d3在传单中显示topojson层？

d3.js leaflet

D3.js 如何使用d3在传单中显示topojson层？,d3.js,leaflet,topojson,D3.js,Leaflet,Topojson,在过去的两天里，我一直在试图在传单上画一张非常简单的地图，现在我遇到了麻烦我有一个topoJSON文件，其中有两层是由以前的geoJSON文件生成的：5个州的US Zipcode和5个州的多边形我想在传单上展示这些内容，使用topoJSON而不是geoJSON是很重要的，因为zip代码层的文件较小问题是我一辈子都无法在地图上显示topoJSON文件中更小的状态层。我在网上看过很多例子，并遵循了迈克·博斯托克的例子：我可以使用d3将文件显示在web浏览器中，因此文件很好。我在脚本中使用了t

在过去的两天里，我一直在试图在传单上画一张非常简单的地图，现在我遇到了麻烦

我有一个topoJSON文件，其中有两层是由以前的geoJSON文件生成的：5个州的US Zipcode和5个州的多边形

我想在传单上展示这些内容，使用topoJSON而不是geoJSON是很重要的，因为zip代码层的文件较小

问题是我一辈子都无法在地图上显示topoJSON文件中更小的状态层。我在网上看过很多例子，并遵循了迈克·博斯托克的例子：

我可以使用d3将文件显示在web浏览器中，因此文件很好。我在脚本中使用了topoJSON的v1以及topoJSON.feature方法。代码如下。我无法使topoJSON文件可用，但我假设它很好，因为我以前在d3中使用过它。如果有人能发现剧本有什么不对劲，那就太好了

谢谢

        <!DOCTYPE html>
<meta charset="utf-8">
<head> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<title>Gulf Zip Codes</title> 
</head>

<div id="map"></div>
<style type="text/css">
#map {
  height: 800px;
}

path {
  fill: #000;
  fill-opacity: .1;
  stroke: #fff;
  stroke-width: 1.5px;
}

path:hover {
  fill: #1f77b4;
  fill-opacity: .4;
}


</style>
<body>

<script>

var map = L.map('map').setView([32.546813, -88.374023], 6);

L.tileLayer('http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png', {

attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");

d3.json("states_and_codes.json", function(error, states_and_codes) {

  var bounds = d3.geo.bounds(states_and_codes);
    path = d3.geo.path().projection(project);

  var feature = g.selectAll("path")
      .data(topojson.feature(states_and_codes,      states_and_codes.objects.claim_states).features)
    .enter().append("path")
    .attr("class", "path")
    .attr("d",path);

  map.on("viewreset", reset);
  reset();

  // Reposition the SVG to cover the features.
  function reset() {
    var bottomLeft = project(bounds[0]),
        topRight = project(bounds[1]);

    svg .attr("width", topRight[0] - bottomLeft[0])
        .attr("height", bottomLeft[1] - topRight[1])
        .style("margin-left", bottomLeft[0] + "px")
        .style("margin-top", topRight[1] + "px");

    g   .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

    feature.attr("d", path);
  }

  // Use Leaflet to implement a D3 geographic projection.
  function project(x) {
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
    return [point.x, point.y];
  } 

});



</script>
</body>

如果您仍然在搜索，或者其他人在搜索，这应该是TopoJson缺少的片段边界

var bounds = d3.geo.bounds(topojson.feature(states_and_codes, states_and_codes.objects.claim_states));

您还可以从源代码中找到大量优秀的TopoJson块

您是否检查了topojson.feature调用的输出？看起来对吗？你确定你所说的关键声明是正确的和可用的吗？我在Github上放了一个。如果JSON没有加载，请尝试查看原始版本图标谢谢！一个小时以来，我一直在寻找正确的方法！