Невозможно загрузить карту D3 для NY, используя файл json - PullRequest
0 голосов
/ 20 ноября 2018

Я пытаюсь загрузить карту Нью-Йорка с помощью файла 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...