D3.js 重叠映射之间的不精确性
我创建了这个地图() 它通过nuts0(国家)表示欧洲,如果右键单击某个国家,则会缩放该县并显示其地区(nuts2) 一段代码:D3.js 重叠映射之间的不精确性,d3.js,data-visualization,topojson,D3.js,Data Visualization,Topojson,我创建了这个地图() 它通过nuts0(国家)表示欧洲,如果右键单击某个国家,则会缩放该县并显示其地区(nuts2) 一段代码: var projectionCurrent = d3.geoMercator() .scale(1) .translate([width / 2, height / 2]); var projectionBase = d3.geoMercator() .scale(1) .translate([width / 2, heigh
var projectionCurrent = d3.geoMercator()
.scale(1)
.translate([width / 2, height / 2]);
var projectionBase = d3.geoMercator()
.scale(1)
.translate([width / 2, height / 2]);
var path = d3.geoPath().projection(projectionCurrent);
var map = d3.select('#container-map');
var mapSvg = map.append('svg')
.attr('id', 'container-map-svg')
.attr('width', width)
.attr('height', height);
var mapSvgG = mapSvg.append('g');
function makeMap(data) {
var nuts0 = data[0];
var nuts2 = data[1];
var countries = topojson.feature(nuts0, nuts0.objects.nuts0);
var regions = topojson.feature(nuts2, nuts2.objects.nuts2);
projectionBase.fitSize([width, height], countries);
projectionCurrent.fitSize([width, height], countries);
mapSvgG.selectAll('path')
.data(countries.features)
.enter()
.append('path')
.attr('class', 'country')
.attr('fill', 'steelblue')
.style('stroke', 'white')
.style('stroke-width', 1)
.attr('d', path)
.attr('id', function(c) {
return 'country' + c.properties.nuts_id;
})
.on('mouseover', function(c) {
d3.select(this)
.attr('fill', 'white')
.raise();
})
.on('mouseout', function(c) {
d3.select(this)
.attr('fill', 'steelblue');
})
.on('contextmenu', function(d, i) {
d3.event.preventDefault();
d3.selectAll('.region').remove();
var features = regions.features.filter(function(feature) {
return feature.properties.nuts_id.substring(0, 2) == d.properties.nuts_id;
});
mapSvg.selectAll(null)
.data(features)
.enter()
.append('path')
.attr('class', 'region')
.attr('fill', 'tomato')
.style('stroke', 'white')
.style('stroke-width', 1)
.attr('d', path)
.attr('id', function(r) {
return 'region' + r.properties.nuts_id;
})
.on('mouseover', function(r) {
d3.select(this)
.attr('fill', 'white')
.raise();
})
.on('mouseout', function(r) {
d3.select(this)
.attr('fill', 'tomato');
})
.on('contextmenu', function(r, i) {
d3.event.preventDefault();
zoomCountries(projectionCurrent, projectionBase);
d3.selectAll('.region').remove();
})
.raise();
var featureCollection = { 'type': 'FeatureCollection', 'features': features }
var projectionEnd = d3.geoMercator();
zoomCountries(projectionCurrent, projectionEnd.fitExtent([[50, 50], [width-50, height-50]], featureCollection));
});
}
问题是,如果你右键点击一个国家,你会看到该地区和该地区附近的一些缺陷
我认为图像可以更好地解释问题:
在这种情况下,我选择了瑞士。
您可以看到区域(红色)、邻国(蓝色)和瑞士国家的道路(白色)
我认为问题在于我使用的json文件不是很精确
原始文件如下所示:
Visvalingam/weighted area
算法在0.70%
简化了json文件filter'name!=“冰岛”
和过滤器名称!=“土耳其”
(很明显,对于nuts2,我消除了冰岛和土耳其,消除了它们的所有地区)nuts0topojson3.json
和nuts2topojson3.json
(我用来创建地图)
我希望这个问题不那么明显。我该怎么办?您的问题在于简化-您正在大量简化多边形,区域层和国家层具有不同的区域权重,因此简化会对每个层进行不同的更改 简化不同的层总是一个问题。这些文件不是以这种差异开头的,因此您可以使用未简化的文件,但这太详细了 相反,对国家和地区使用简化的区域图层。每个地区都有一个标识符,该标识符结合了国家代码和数字(两个字母的国家代码后跟一些数字)。我创建了一个新属性,该属性使用以下命令在区域文件中标识国家:
nuts2.objects.nuts2.geometries.forEach(function(n) {
n.properties.country = n.properties.id.substring(0,2);
})
现在,我们可以将修改后的topojson放入mapshaper中,并在控制台中应用分解(分解也可以在QGis或任何其他GIS平台中轻松完成)。在mapshaper中:
- 导入topojson
- 打开控制台
- 类型
解散国家/地区
- 将溶解的图层导出为新的topojson文件
objects.nuts0
不存在于这个新文件中,因为我们使用了nuts2,所以为了清晰起见,我们可以将其修改为nuts0
。我们也没有国家的所有属性,我们只有两位数的国家代码。这需要对代码进行一些调整,以访问country
属性,而不是原始country层中存在的id
由于我们有一个区域层和一个国家层,它们共享来自同一文件(区域层)的相同边界,因此我们没有任何间隙或奇数重叠的问题
这是一张基于你的照片。(在匆忙中,我更改了topojson文件名)
这可以进一步优化,例如,如果我们将区域和国家合并到同一地形中,我们只需要加载一次几何体(并且由于国家与区域共享圆弧,因此要加载的数据较少)。也可以使用不同的数据准备或GIS覆盖来保存文件中每个国家的国家属性