topoJSON on D3：地图不显示（但它的工作原理在www.mapshaper.org） [英] topoJSON on D3: map doesn't show (but it works on www.mapshaper.org)

问题描述

我正在尝试复制 http://bl.ocks.org/mbostock/4060606使用英国县图。

我遵循以下步骤 - 几乎建议 http://bost.ocks.org/mike/map ：
1）我从Ordnance Survey下载了shapefile，并使用qGIS
提取了一些数据2）准备好后，我翻译了使用ogr2​​ogr将形状文件转换为GeoJSON
3）我将GeoJSON转换为topoJSON，确保ID保留了

我几乎复制了choropleth的原始示例mbostock。然而，不是一个漂亮的地图，我得到一个圆圈。

为了完整性，这是页面的javascript部分：

  var width = 960，
 height = 600; 
 
 var rateById = d3.map（）; 
 
 var quantize = d3.scale.quantize（）
 .domain（[0，.15]）
 .range（d3.range（9）.map i）{returnq+ i +-9;}））; 
 
 var projection = d3.geo.albers（）
 .center（[0，55.4]）
 .rotate（[4.4，0]）
 .parallels （[50，60]）
 .scale（50）
 .translate（[width / 2，height / 2]）; 
 
 var path = d3.geo.path（）
 .projection（projection）; 
 
 
 var svg = d3.select（body）append（svg）
 .attr（width，width）
 .attr height，height）; 
 
 queue（）
 .defer（d3.json，uk.topo.json）
 .defer（d3.tsv，employment.tsv，function ）{rateById.set（d.id，+ d.rate）;}）
 .await（ready）; 
 
 function ready（error，uk）{
 svg.append（g）
 .attr（class，counties）
 .selectAll path）
 .data（topojson.feature（uk，uk.objects.counties）.features）
 .enter（）。append（path）
 // .attr class，function（d）{return quantize（rateById.get（d.id））;}）
 .attr（class，q5-9）
 .attr ，path）; 
 
 // svg.append（path）
 // .datum（topojson.mesh（us，us.objects.states，function（a，b）{return a！= = b;}））
 // .attr（class，states）
 // .attr（d，path）; 
} 
 
 d3.select（self.frameElement）.style（height，height +px）; 
  

这些县topoJSON太大，无法粘贴，但大致如下：

  {type：Topology，objects：{counties：{type：GeometryCollection，bbox：[ 220956.7,35190.3,655967.1,586683]，geometries：[{type：Polygon，properties：{name：Buckinghamshire}，id：11901，arcs：[ 1，-2，-3，-4，-5，-6]]}，{type：Polygon，properties：{name：Cambridgeshire}，id：1386， arcs：[[ -  7，-8，-9，-10，-11，-12，-13，-14]]}，{type： Cumbria}，id：13244，arcs：[[ -  15，-16，-17]]}，{type：Polygon，properties：{name：Derbs }，id：13688，arcs：[[ -  18，-19，-20，-21]，[ -  22]]}，...}arcs：[[[5876,2688] ，[ -  67,53]，[ -  21,101]，[7,65]，[96,66]，[ -  7,66]，[ -  78,69]，[ -  234,12] 42]，...}，transform：{scale：[43.5053905390539,55.15478547854785]，translate：[220956.7,35190.3]}} 
  

我不是一个伟大的专家在这里，所以我可能会做一些根本错误。但是，我有一个确定性：

• 英国县的地图是正确的，因为它在 http://www.mapshaper.org/

任何想法？如果需要，我很乐意粘贴完整的文件。

谢谢！

解决方案>

在这种情况下，您应该使用

  d3.geo.path（）。projection（null）; 
  

但是请确保首先将您的topojson缩放到所需的大小

  topojson --width = 960 --height = 500 --margin = 10 --cartesian -o out.json  -  in.shp 
  

或使用 ogr2ogr

$ b b

  ogr2ogr -t_srs EPSG：4326 out.shp in.shp 
  

I'm trying to replicate http://bl.ocks.org/mbostock/4060606 using a UK Counties map.

I followed the following steps - pretty much what is suggested on http://bost.ocks.org/mike/map: 1) I downloaded the shapefile from Ordnance Survey and extracted some data using qGIS 2) when ready, I translated the shapefile into GeoJSON using ogr2ogr 3) I converted the GeoJSON into topoJSON making sure the IDs were preserved

I pretty much copied the original example for the choropleth from mbostock. However, instead of a nice map, I get a... circle. I wonder if I'm doing some errors with the projection?

For completeness, this is the javascript part of the page:

var width = 960,
    height = 600;

var rateById = d3.map();

var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var projection = d3.geo.albers()
          .center([0, 55.4])
          .rotate([4.4, 0])
          .parallels([50, 60])
          .scale(50)
          .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);


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

queue()
    .defer(d3.json, "uk.topo.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, uk) {
    svg.append("g")
     .attr("class", "counties")
     .selectAll("path")
     .data(topojson.feature(uk, uk.objects.counties).features)
     .enter().append("path")
//     .attr("class", function(d) { return quantize(rateById.get(d.id)); })
     .attr("class", "q5-9" )
     .attr("d", path);

//  svg.append("path")
//     .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
//      .attr("class", "states")
//     .attr("d", path);
}

d3.select(self.frameElement).style("height", height + "px");

The counties topoJSON is too big to be pasted here, but roughly it's:

{"type":"Topology","objects":{"counties":{"type":"GeometryCollection","bbox":[220956.7,35190.3,655967.1,586683],"geometries":[{"type":"Polygon","properties":{"name":"Buckinghamshire"},"id":11901,"arcs":[[-1,-2,-3,-4,-5,-6]]},{"type":"Polygon","properties":{"name":"Cambridgeshire"},"id":1386,"arcs":[[-7,-8,-9,-10,-11,-12,-13,-14]]},{"type":"Polygon","properties":{"name":"Cumbria"},"id":13244,"arcs":[[-15,-16,-17]]},{"type":"Polygon","properties":{"name":"Derbs"},"id":13688,"arcs":[[-18,-19,-20,-21],[-22]]},...},"arcs":[[[5876,2688],[-67,53],[-21,101],[7,65],[96,66],[-7,66],[-78,69],[-234,12],[-5,42],...},"transform":{"scale":[43.5053905390539,55.15478547854785],"translate":[220956.7,35190.3]}}

I'm not a great expert here so I might be doing something fundamentally wrong. However, I have one certainty:

• the UK counties map is correct, as it displays correctly on http://www.mapshaper.org/

Any idea? I'm happy to paste the complete files if needed.

Thanks!

解决方案

The coordinates seem to be already projected (i.e. cartesian coordinates).

In this case you should use

d3.geo.path().projection(null);

But make sure you scale your topojson first to the desired size

topojson --width=960 --height=500 --margin=10 --cartesian -o out.json -- in.shp

Or reproject the shapefile first using ogr2ogr

ogr2ogr -t_srs EPSG:4326 out.shp in.shp

这篇关于topoJSON on D3：地图不显示（但它的工作原理在www.mapshaper.org）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！