基于 d3(1.4 版)文档https://github.com/d3/d3-geo/blob/master/README.md#geoProjection https://github.com/d3/d3-geo/blob/master/README.md#geoProjection,d3 投影应设置为 null 以使用数据的原始坐标。如果使用 null 投影看起来正确,我该如何缩放?这是代码:
var path = d3.geoPath()
.projection(null)
.context(context);
bands.features.forEach(function(d, i) {
context.beginPath();
context.fillStyle = colors[i];
context.globalAlpha = .5;
path(d);
context.fill();
});
我尝试定义自己的投影,但投影看起来不正确。这是代码
var project = d3.geoProjection(function(x,y){
return [x,y]
});
var path = d3.geoPath()
.projection(project)
.context(context);
我会看一下 d3.geoTransform ,它应该比 d3.projection 更适合显示已经投影的笛卡尔数据。来自迈克·博斯托克:
但是如果你的几何图形已经是平面的怎么办?也就是说,如果您只想获取投影几何图形,但仍将其平移或缩放以适合视口,该怎么办?
您可以实现自定义几何变换以完全控制投影过程。
要查看比我在这里可以做的更好的示例(并阅读引用的其余部分),请参阅这个街区 https://bl.ocks.org/mbostock/5663666
例如,对于您的情况,您可能会使用以下内容:
function scale (scaleFactor) {
return d3.geoTransform({
point: function(x, y) {
this.stream.point(x * scaleFactor, y * scaleFactor);
}
});
}
path = d3.geoPath().projection(scale(2));
至于为什么显示自定义投影
var project = d3.geoProjection(function(x,y){
return [x,y] });
改变/扭曲投影,我不知道(我有类似的结果测试这个答案),但如果这个投影的输出可用,它可以相当容易地缩放:
var project = d3.geoProjection(function(x,y){
return [x,y] }).scale(1000);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)