使用 geojson 地图仅在一个轴上调整 d3JS 中的投影大小

Question

我有一张用 d3js 显示的国家地图。我无法成功让它与这个投影一起工作：

var projection = d3.geoConicConformal()
    .center([2.454071, 46.279229])
    .scale(0.1)
    .translate([width / 2, height / 2]);
path.projection(projection);

（即使其他地图有效）

所以我正在尝试使用 geoIdentity 来避免定位：

var projection = d3.geoIdentity().reflectY(true).fitExtent([[100, 100], [width-100, height-100]], geojson); //.fitSize([width,height],geojson)
    var path = d3.geoPath(projection);

这种工作，但问题是我的地图比它应该的更宽。（在gesojson.io中地图似乎有很好的比例）：

所以我想减少宽度（X轴）来改变比例。我尝试使用 fitExtend 和 fitSize，但没有任何效果，是否有解决方案？

为安德鲁编辑：

这是我最初使用 geoConicalConformal（是否使用 fitsize/fitextend）的结果：

Answer 1

我发现了一个非常有效的技巧。请记住，这只是一个“技巧”。

您必须为每个路径添加变换 scaleX（如果形状太宽则 < 1）样式属性：

deps.selectAll("path")
        .data(geojson.features)
        .enter()
        .append("path")
        .attr('class', 'department')
        .attr("d", path)
        .attr('id', d => "d" + d.properties.dep)
        .style('transform', 'scaleX(0.7)')

对我来说，0.7 是完美的，你必须在你的项目中调整这个参数。然后，调整 fitExtend 使整个形状向右移动，因为 scaleX < 1 同时使形状向左移动。例如：

var projection = d3.geoIdentity().reflectY(true).fitExtent([[width * 0.3, height * 0.1], [width * 1.3, height * 0.9]], geojson);

使用 geojson 地图仅在一个轴上调整 d3JS 中的投影大小

Resize projection in d3JS in only one axis with a geojson map

javascript

geojson

d3.js