Я пытаюсь загрузить карту Нью-Йорка с помощью файла JSON данных Такси, но я не могу просмотреть правильный вывод.Выводит очень странную карту.Я попытался найти дополнительную онлайн-ссылку, но не смог найти.
В настоящее время код пытается загрузить данные такси с использованием taxi_zone.json.
вот мой код: Изображение с текущим выводом
<script src="../lib/d3.v3.min.js"></script>
<script src="../lib/d3-queue.v3.min.js"></script>
<script src="../lib/topojson.v1.min.js"></script>
<script src="../lib/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top:100, right:100, bottom: 10, left: 100}
var width = 1200-margin.left-margin.right,
height = 800-margin.bottom-margin.top;;
//var path = d3.geo.path();
var nameById = d3.map();
var svg = d3.select("#map").append("svg")
.attr("width", width+margin.left+margin.right)
.attr("height", height+margin.bottom+margin.top);
svg.append("text")
.attr("x", (width / 2))
.attr("y", (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "30px")
.style("font-weight","Bold");
tip = d3.tip()
.attr('class', 'd3-tip')
.style('opacity', 0.5)
.offset([-10, 0])
.direction('n')
.html(function(d) {
return "City: "+ nameById.get(d.properties.zone)
});
svg.call(tip);
d3.queue()
.defer(d3.json, "taxi_zones.json")
.await(ready);
function ready(error, taxi_zones) {
if (error) throw error;
console.log(taxi_zones);
svg.append("g")
.attr("class", "counties")
.attr("transform","translate(20,50)")
.attr("stroke","#f2f2f2")
.selectAll("path")
.data(topojson.feature(taxi_zones, taxi_zones.objects.taxi_zones).features)
.enter().append("path")
.attr("d", d3.geo.path())
.style("fill", "grey")
.on('mouseover',tip.show)
.on('mouseout', tip.hide);
svg.append("path")
.datum(topojson.mesh(taxi_zones, taxi_zones.objects.taxi_zones, function(a, b) { {console.log(a)} return a.LocationID !== b.LocationID; }))
.attr("class", "states")
.attr("d", d3.geo.path().projection(d3.geo.mercator().scale(50000)));
}
</script>
Не могли бы вы помочь мне с тем, что я делаю здесь неправильно.
Я загрузил файл JSON здесь: https://jsonblob.com/97dc4332-ecf4-11e8-bcc5-511f7ee4aaef