javascript – 需要使用d3 geoPath.projection缩放已投影的数据(null)

2023年2月26日 332次阅读

基于d3(ver 1.4)文档
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.来自Mike Bostock：

But what if your geometry is already planar? That is, what if you just want to take projected geometry, but still translate or scale it to fit the viewport?

You can implement a custom geometry transform to gain complete control over the projection process.

要查看比我在此处所做的更好的示例(并阅读其余的引用),请参阅this Bl.ock

例如,对于您的情况,您可能会使用以下内容：

    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);
点赞