用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繪製紐約街區

回答

相關問題