d3.js在数据循环的每次迭代上更改投影

rn0zuynd  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(162)

我是非常新的d3.js,所以我道歉,如果这是一个愚蠢的问题。
当迭代一个geojson FeatureCollection列表时,我想改变每个项目的投影。这可能吗?
我的代码看起来像这样:

var width = 200,
var height = 200;
var svg = d3.select('#content g.map')
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var projection = d3.geoAlbers()
                   .fitExtent(
                      [
                      [0, 0],
                      [width, height],
                      ],
                    features
                   );

let geoGenerator = d3.geoPath().projection(projection)

var group = svg.append('g');

group.selectAll('path')
     .data(geojson.features)
     .enter()
     .append('path')
     .attr('d', geoGenerator)
     .attr('stroke-width', '3')
     .attr('stroke', 'black')
     .attr('fill', 'none');

我使用了geoAlbers()和.fitExtend(),其中我的投影是根据geojson文件中的所有元素绘制的,但是我想为每个元素单独绘制。
我的目标是创建一个数组中每个元素大小相同的绘图。任何帮助都将不胜感激!

xzabzqsa

xzabzqsa1#

您可以使用projection.fitSizeprojection.fitExtent来修改投影,使其投影geojson特征来填充指定的边界框。通常这些方法用于特征集合或单个特征,但没有理由我们不能对每个特征都使用它。

  • projection.fitSize/fitExtent仅修改投影的平移和缩放值:它们仅缩放和平移投影要素。要使用圆锥投影(如阿尔伯斯投影)创建格网,需要重新计算每个要素的投影的连续线/平行线,否则可能会出现形状严重扭曲的风险。使用圆柱投影则无需进行此操作(我使用墨卡托来简化解决方案)。但是,在某些情况下,为每个特征计算适当的反子午线,使得没有特征跨越它,大多数D3投影使用180度东西作为默认的反子午线,然而,您可以通过使用projection.rotate()旋转投影来为每个投影更改此设置。使用d3.geoBounds或d3.geoCenter可以帮助简化此操作,下面的解决方案不考虑这些边缘情况。*

下面的代码片段使用g元素(每个特征一个)进行定位,然后附加路径,并通过使用selection.each(),使用projection.fitSize()计算所需的投影参数,以使特征边界框具有正确的大小(每个边界框为size像素的正方形)。
第一个

相关问题