用d3.js绘制纽约街区

我想用d3.js创建一个纽约街区地图。用d3.js绘制纽约街区

我从这里 https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-nynta.page

下载的文件，然后我把shape文件到http://mapshaper.org/，它简化为1％。最后，我将它作为topojson导出。

现在，我使用下面的d3.js代码，我得到随机线。

<!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>

来源

2017-02-23 jeangelj

你可以分享你一起工作的sales.csv和nynta.json文件？ – elias

我制作了与您描述的步骤相同的步骤，并且它对我来说很流畅，最终效果很好，而不像您插入的图片那样。你可以重复检查你所做的步骤吗？ – elias

真的吗？令人惊讶的 - 让我再试一次 – jeangelj

多亏了惊人的努力和@elias的时间投资，我们想通了，shape文件没有工作。相反，我们使用geojson并在mapshaper.org中将其简化为导出为topojson。

以供将来使用一个提示 - 当你这样做，你可能会保存一个新的文件名，所以它会改变你的功能层次

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

非常感谢你，现在看起来是这样的：

来源

2017-02-24 19:02:16 jeangelj

用d3.js绘制纽约街区

回答

相关问题