如何在 d3.js 中缩放路径答案

【问题标题】：How to zoom the path in d3.js如何在 d3.js 中缩放路径
【发布时间】：2021-09-02 22:03:53
【问题描述】：

尝试解决此问题，更改了 geoJsonURL 以接收更复杂的形状。使用这种新形状，缩放方法有效，但形状完全混乱。根据Coordinate system: WGS 84 (EPSG:4326) 和this stack topic，它应该或多或少像我现在必须计算正确的投影。但是，仍然给出了一个奇怪的路径输出。非常感谢您的帮助，在此先感谢。

下面是原始主题，上面是新部分

我试图放大路径，但缩放方法不是什么也不做。在一些主题中看到了 pointRadius 的使用方法但不起作用。如果您注意到，路径几乎在中间（我手动翻译），但很小。我做错了什么我的方法？

我可以得到坐标系和盒子坐标（这不是在本例中）以备不时之需。我一直在读一些示例，但似乎没有任何效果。知道我在做什么错误的？坐标系：WGS 84 (EPSG:4326)

提前致谢

/* geometryType=esriGeometryPolyline OR esriGeometryMultipoint OR esriGeometryPolygon OR esriGeometryEnvelope*/
const geoJsonURL = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&where=(LOWER(NOME)%20LIKE%20LOWER(%27%25Alhadas%25%27))&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"

const canvas = d3.select("#map").append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .style("border", "2px solid red");

const projection = d3.geoTransverseMercator()
  .rotate([8.1331, 0])
  .center([0, 39.6682])
  .scale(200)
  .translate([300, 350]);

const path = d3.geoPath().projection(projection);

const group = canvas.append("g")

d3.json(geoJsonURL).then(function (data) {
  group.selectAll("g")
    .data(data.features)
    .enter()
    .append("path")
    .attr("stroke", "blue")
    .attr("stroke-width", 1)
    .attr("fill", "none")
    .attr("d", path);
  //.attr("d", path.pointRadius(20));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
    <div id="map"></div>
</body>

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

所以...经过长时间的搜索和阅读，发现我的地理坐标已经在二维坐标系统Scaling d3 v4 map to fit SVG (or at all)中。 d3.geoMercator 方法是将 3D 多边形几何体转换为 2D 几何体（平面几何体）的函数，因此它将使 3D 多边形几何体变平。由于我的坐标系统已经变平，因此在其上使用这种方法只会创建新的 2D 路径（希望这确实是正确的解释...）。

代码现在看起来像这样

const queryRegionText = "where=NOME LIKE '%25Alhadas%25'"
const geoJsonURL2 = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&" + queryRegionText + "&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"

const width = 500;
const height = 500;

const canvas = d3.select("#map").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("border", "2px solid red");

d3.json(geoJsonURL2).then(function (data) {

  var projection = d3.geoIdentity()
    .fitSize([width, height], data);

  const path = d3.geoPath().projection(projection);

  const group = canvas.append("g")

  group.selectAll("g")
    .data(data.features)
    .enter()
    .append("path")
    .attr("stroke", "black")
    .attr("stroke-width", 1)
    .attr("fill", "gray")
    .attr("d", path);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
    <div id="map"></div>
</body>

【讨论】：