Question

我正在尝试使用出租车数据JSON文件加载NY地图，但是我无法查看正确的输出。它输出一个非常奇怪的地图。我试图搜索更多在线参考，但找不到。

当前代码正在尝试使用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

无法使用json文件为NY加载D3地图

0 个答案: