Question

js map不显示任何类型的数据。

我的实施有什么问题

d3.json("app/asserts/oowvShapes.json", function (error, oowv) {
    if (error) return console.error(error);
    console.log(oowv);
    var width = 600,
        height = 900;

    var svg = d3.select("radarMap").append("svg")
        .attr("width", width)
        .attr("height", height);

    svg.append("path")
        .datum({ type: "FeatureCollection", features: "features" })
        .attr("d", d3.geo.path());

我在index.html中绑定d3.min.js

我的Json文件：

"features": [
{
  "type": "Feature",
  "properties": {
    "Gem_kurz": "Wangerooge",
    "Shape_Leng": 20564.5414369,
    "Shape_Area": 8294404
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [ 3425411.000000002, 5960849.999999998 ],
        [ 3425310, 5960849.999999998 ],
        [ 3425239.999999999, 5960920 ],
        [ 3425214.000000001, 5961024.000000002 ],
        [ 3425207.000000001, 5961189 ],
        [ 3425128.999999999, 5961361.000000002 ],
        [ 3425008.000000001, 5961501.000000002 ],
        [ 3424851.000000002, 5961666 ],
        [ 3424725, 5961826.000000004 ],
        [ 3424634, 5961973.000000002 ],
        [ 3424545.999999999, 5962033.000000002 ],
        [ 3424424, 5962108.000000004 ],
        [ 3424380, 5962135.000000002 ],
        [ 3424277.000000001, 5962195.000000002 ],
        [ 3424161.000000001, 5962334.999999998 ],
        [ 3424135, 5962455.000000004 ],
        [ 3424154.000000001, 5962530 ],
        [ 3424274.000000001, 5962658.000000002 ],
        [ 3424392.000000001, 5962746.000000002 ],
        [ 3424503, 5962823.000000002 ],
        [ 3424619.999999999, 5962947 ],
        [ 3424737.999999999, 5963016 ],
        [ 3425025, 5963122 ],
        [ 3425247, 5963153.000000002 ],
        [ 3425531.000000001, 5963173 ],
        [ 3425983, 5963161.000000002 ],
        [ 3426472.000000001, 5963202 ],
        [ 3426930.999999999, 5963178 ],
        [ 3427282.000000001, 5963173 ],
        [ 3427689.000000001, 5963101.000000002 ],
        [ 3428022.000000001, 5963077 ],
        [ 3428495, 5962979 ],
        [ 3429071, 5962825.000000004 ],
        [ 3429519.000000001, 5962737.000000004 ],
        [ 3429927, 5962681.000000002 ],
        [ 3430296.000000001, 5962592.000000002 ],
        [ 3430599.000000001, 5962494 ],
        [ 3430777.000000001, 5962415 ],
        [ 3430837.000000001, 5962355 ],
        [ 3430821.000000001, 5962295 ],
        [ 3430756.000000001, 5962243 ],
        [ 3430712, 5962172.000000002 ],
        [ 3430768.000000001, 5962077 ],
        [ 3430878, 5961999 ],
        [ 3431340.000000002, 5961839.999999998 ],
        [ 3431618, 5961740 ],
        [ 3431983.000000002, 5961588.000000002 ],
        [ 3432183, 5961452 ],
        [ 3432216.999999999, 5961363.000000004 ],
        [ 3432168.000000001, 5961298.000000004 ],
        [ 3432204, 5961218.000000002 ],
        [ 3432147.000000001, 5961159.000000002 ],
        [ 3432118, 5961111.000000002 ],
        [ 3432153, 5961054 ],
        [ 3432208, 5961008 ],
        [ 3432242.000000001, 5960936.000000002 ],
        [ 3432198.000000001, 5960904.000000002 ],
        [ 3432065, 5960884 ],
        [ 3431887, 5960989 ],
        [ 3431760.000000001, 5961111.000000002 ],
        [ 3431633.000000001, 5961245 ],
        [ 3431505, 5961329.000000002 ],
        [ 3430693, 5961728.999999998 ],
        [ 3430578.000000001, 5961733.000000004 ],
        [ 3430464, 5961624 ],
        [ 3430292.000000002, 5961506.000000002 ],
        [ 3430068, 5961513 ],
        [ 3429899.000000002, 5961531 ],
        [ 3429746.000000002, 5961529.000000002 ],
        [ 3429650, 5961526 ],
        [ 3429505.000000001, 5961547.000000002 ],
        [ 3429369.000000002, 5961585.000000004 ],
        [ 3429322.000000001, 5961533.000000002 ],
        [ 3429213.000000001, 5961568 ],
        [ 3429107.000000001, 5961568 ],
        [ 3428878.000000001, 5961562.000000004 ],
        [ 3428564.000000002, 5961591 ],
        [ 3428232, 5961666 ],
        [ 3427884.000000002, 5961793.000000004 ],
        [ 3427552.000000001, 5961954.000000002 ],
        [ 3427409.000000001, 5962033.000000002 ],
        [ 3427212.000000001, 5962101 ],
        [ 3426927, 5962180.000000002 ],
        [ 3426464, 5962316.000000004 ],
        [ 3426279, 5962434 ],
        [ 3426108, 5962522 ],
        [ 3425950.000000002, 5962510.000000002 ],
        [ 3425844, 5962430.000000002 ],
        [ 3425741.999999999, 5962273.000000002 ],
        [ 3425678, 5962124 ],
        [ 3425573.000000002, 5961946.000000004 ],
        [ 3425557, 5961794 ],
        [ 3425520, 5961696.000000004 ],
        [ 3425495, 5961469.999999998 ],
        [ 3425487.000000001, 5961306.000000002 ],
        [ 3425542.999999999, 5961226 ],
        [ 3425608, 5961179 ],
        [ 3425623.000000001, 5961125.000000002 ],
        [ 3425593.000000001, 5961045 ],
        [ 3425499.000000002, 5960912 ],
        [ 3425411.000000002, 5960849.999999998 ]
      ]
    ]
  }
}, .....

Full json：https://www.dropbox.com/s/wa3hahk9u8rh9cv/oowvShapes.json?dl=0

任何人都可以帮助我:(

Answer 1

有两件事。

首先您的通话结构我建议您这样做：

svg.selectAll("path")
               .data(oowv.features)
               .enter()
               .append("path")
               .attr("d", path);

<强>第二您的问题似乎与您的数据有关。如果我没弄错的话，那些坐标使用国家网格参考系统。默认情况下，geoJSON期望坐标为WGS84（经度，纬度）。您可以尝试再次转换形状文件并确保输出参考系统是WGS84。您可以在QGIS中将文件另存为geoJSON并选择WGS84作为输出坐标参考系统。

生成的geoJSON应该可以正常工作。所以要回答你的问题，请更新代码。在您的文件中格式正确。这是不正确的坐标。

d3.js map不显示数据

1 个答案: