如何在 d3.js 中缩放路径

Question

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

下面是原题目，上面是新题目

I was trying to make zoom in to the path, but the scale method is not doing nothing. Saw in some topics as well the use of pointRadius method but not working to. If you noted, the path is almost on middle (i translate it manually), but very small. What i am doing wrong with my approach ?

I can get the coordinate system and the box coordinates (this is not in this example) in case that is needed. I have been reading some examples, but it seems nothing is working. Any idea what i am doing wrong ? Coordinate system: WGS 84 (EPSG:4326)

Thanks in advance

/* 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>

Answer 1

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

代码现在看起来像这样

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>

如何在 d3.js 中缩放路径

How to zoom the path in d3.js

javascript

d3.js