D3映射为黑盒

Question

我已经从西班牙农业部的网站上下载了西班牙各省的shapefile：

http://servicios2.marm.es/sia/visualizacion/descargas/mapas.jsp

然后我使用了mapshaper，“修复点”并将其导出为shapefile。

接下来，我将.shp和.shx文件与原始.dbf放在一个文件夹中，并使用ogr2ogr将其转换为json，正如Scott Murray在他的书中所解释的那样。http://chimera.labs.oreilly.com/books/1230000000345/ch12.html

结果不是一张地图，而是一个黑盒：http://bl.ocks.org/murtra/raw/6150452a9ecca742e95c/

我不明白为什么，因为GeoJSON和我以前用过的其他shapefile具有相同的结构，如果我检查svg，路径就在那里。我尝试了另一种投影/尺度，但什么都没有改变...有什么想法吗？

注:通过ESP_adm2.json更改provincias.json (从http://www.gadm.org/country下载)，映射可以正常工作。所有文件都可以在以下位置找到：https://gist.github.com/murtra/6150452a9ecca742e95c

Answer 1

由于形状编码的特定方式，您很可能会看到黑盒。

尝试将“填充”和“笔触”绘制路径的样式更改为无和黑色。

希望这对你有帮助，ioniATX

Answer 2

我的问题是因为提到了id attr而不是class。可能是类似的问题：

async ngOnInit() {
    this.topo = await this._geoService.getUSTopoJson();
    const projection = d3.geoAlbersUsa().scale(1070).translate([ this._width / 2, this._height / 2 ]);
    const path = d3.geoPath().projection(projection);
    this._svg = d3.select('svg')
      .attr('width', this._width)
      .attr('height', this._height);

    this._svg.append('rect')
      .attr('class', 'background')
      .attr('width', this._width)
      .attr('height', this._height);

    const g = this._svg.append('g');

    g.append('g')
      .attr('class', 'states') // <-- Needed to be 'class' instead of 'id'
      .selectAll('path')
      .data(topojson.feature(this.topo, this.topo.objects.states).features)
      .enter().append('path')
      .attr('d', path);

    g.append('path')
      .datum(topojson.mesh(this.topo, this.topo.objects.states, (a, b) => a !== b ))
      .attr('id', 'state-borders')
      .attr('d', path);
  }