logo标签列表

使用d3.js绘制纽约市的社区地图

d3.jsgeolocationmaps
3
我正在尝试使用d3.js创建一个纽约街区地图。我从以下网站下载了文件：https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-nynta.page，然后将shapefile文件拖放到http://mapshaper.org/并将其简化为1%。最后，我将其导出为topojson格式。
现在，我正在使用以下d3.js代码，但我得到的是随机线条。

enter image description here

<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
  body {
    font-family: arial, sans;
    font-size: 14px;
    width: 960px;
    margin: 40px auto;
  }
  .ny-neighborhoods {
    stroke: #000;
    stroke-width: .50;
    fill: none;
  }
</style>

<body>
<div id="chart-container"></div>
</body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>

<script type="text/javascript">

var margin = {top: 5, right: 5, bottom: 5, left: 5};
var width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

queue()
    //.defer(d3.csv, "sales.csv")
    .defer(d3.json, "nynta.json")
    .await(ready);

function ready(error, data, ny) {
  if (error) return console.warn(error);
  console.log(ny)
  //data.forEach(function(d) {
        //d.val = +d.val;
      //});
  var nyfeatures = topojson.feature(ny,ny.objects.nynta)
  console.log(nyfeatures)
  var svg = d3.select("#chart-container")
    .append("svg")
      .attr("class", "map")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  var path = d3.geoPath()
      .projection(d3.geoAlbersUsa()
      .fitSize([width, height], nyfeatures));
  var nyPaths = svg.selectAll(".ny-neighborhoods")
      .data(nyfeatures.features)
    .enter().append("path")
      .attr("class", "ny-neighborhoods")
      .attr("d", function(d) { return path(d); })
}
</script>
真的吗？太棒了 - 让我再试一次。 - jeangelj
请在完成后通知我。 - elias
@elias 我仍然遇到相同的问题，我从链接获取了shapefile，使用mapshaper将其简化为1%，导出为topojson“nynta.json”。然后我使用代码 - 这次我从stackoverflow上直接复制/粘贴它，当我在本地服务器上运行它时，我得到那些疯狂的线条。你使用完全相同的代码吗？我想这可能与geoAlbersUsa有关。 - jeangelj
1
我使用了完全相同的代码。你能否提供你的JSON文件链接？ - elias
1
让我们在聊天中继续这个讨论。 - elias
显示剩余3条评论
1个回答
2

感谢@elias的出色努力和时间投入，我们发现shapefile无法使用。相反，我们使用了geojson，并在mapshaper.org上对其进行了简化，以导出为topojson。

未来使用的一个提示-当您这样做时，您可能会将其保存在新文件名下，因此会更改您的要素层次结构。

var nyfeatures = topojson.feature(ny,ny.objects.newyork)

非常感谢，现在它的样子是这样的：

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接