Земельные участки Нью-Йорк с d3.js

Я пытаюсь создать карту окрестностей Нью-Йорка с d3.js.Земельные участки Нью-Йорк с d3.js

Я скачал файл отсюда https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-nynta.page

Тогда я уронить шейп в 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, мы выяснили, что шейпфайл не работает. Вместо этого мы использовали geojson и упростили это в mapshaper.org, чтобы экспортировать его как topojson.

Один намек для будущего использования - когда вы сделаете это, вы, вероятно, сохранить его под новым именем, так что это изменит вашу особенности иерархии

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

большое спасибо, он теперь выглядит так:

источник

2017-02-24 19:02:16 jeangelj

ответ

Смежные вопросы