如何在地图部分显示美国州/加拿大省的缩写？

Question

1. 如何显示 ClipPath 内所有触摸状态的 2 位缩写，而不是被路线隐藏？

2. 如果坐标点(.append("circle"))直接位于MapBBox边框，如何显示完整的圆？目前，仅显示半圆（实际上是正确的） - 请参阅完整示例，按钮 05_1979

  // --- clear svg -----------------------------------------
  d3.select("svg").remove();
  
  // --- get modal size --------------------------------------------------------
  document.querySelector(".modal").addEventListener("shown.bs.modal", function (e) {
    let modalWidth = document.querySelector(".modal-dialog").clientWidth;
    let modalHeight = document.querySelector(".modal-dialog").clientHeight;
  
    // --- load both json files, V7 method -----------------
    Promise.all([
      d3.json("https://gist.githubusercontent.com/manu-75/06b031548def239d7038e7157a3c204c/raw/8da47d28b846b6b232cad57692d737e05ddebee3/USA_CAN.geojson"),
      d3.json(`https://gist.githubusercontent.com/manu-75/06b031548def239d7038e7157a3c204c/raw/8da47d28b846b6b232cad57692d737e05ddebee3/${currentTopo}.topojson`),
      ]).then(function (data) {
      let baseMap = data[0];
      let tourMap = data[1];
      let geojsonTour = topojson.feature(tourMap, tourMap.objects[currentTopo]);
      
    // --- get bbox of tourMap -----------------------------
    let tourMapBbox = d3.geoBounds(geojsonTour);
    
    // --- get aspectRatio from topojson -------------------
    let widthBbox = tourMapBbox[1][0] - tourMapBbox[0][0];
    let heightBbox = tourMapBbox[1][1] - tourMapBbox[0][1];
    let aspectRatio = widthBbox / heightBbox;
    let tourHeightCalc = Math.round(modalWidth / aspectRatio);
    
    // --- margins, width, height --------------------------
    let margin = { top: 20, right: 20, bottom: 20, left: 20 },
      width = modalWidth - margin.left - margin.right,
      height = tourHeightCalc - margin.top - margin.bottom;
    
    // --- svg -------------------------------------------
    let svg = d3
      .select("#tourMap")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    // --- projection ------------------------------------
    let projection = d3.geoMercator().fitSize([width, height], geojsonTour);

    // --- path ------------------------------------------
    let path = d3.geoPath().projection(projection);

    // --- svg append tour -------------------------------
    svg
      .append("path")
      .datum(geojsonTour)
      .attr("d", path)
      .attr("fill", "none")
      .attr("stroke", "#ff674d")
      .attr("stroke-width", 1.5);

    // --- svg append origin circle ----------------------
    svg
      .append("circle")
      .attr("cx", projection(destArray)[0])
      .attr("cy", projection(destArray)[1])
      .attr("r", 4)
      .attr("fill", "#338bff");

    // --- clipPath defined by tourMapBbox ----------------
    const clipPath = svg
      .append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("x", projection(tourMapBbox[0])[0])
      .attr("y", projection(tourMapBbox[1])[1])
      .attr("width", projection(tourMapBbox[1])[0] - projection(tourMapBbox[0])[0])
      .attr("height", projection(tourMapBbox[0])[1] - projection(tourMapBbox[1])[1]);

    // --- append clipPath -------------------------------
    const g = svg.append("g").attr("clip-path", "url(#clip)");
    
    // --- abbr name for states within clipPath ????
    // --- use "properties":{"name":"Washington","id":"US-WA" ....
    // --- last 2 characters from the id, in this example 'WA'

    // --- svg append baseMap ----------------------------
    svg
      .append("path")
      .datum(baseMap)
      .attr("d", path)
      .attr("fill", "transparent")
      .attr("stroke", "black")
      .attr("stroke-opacity", 0.5)
      .attr("stroke-width", 0.3);

    });
  }, { once: true });

这是我完整的 jsfiddle 示例

任何帮助表示赞赏！

Answer 1

要得到一个完整的圆，你必须检查圆是否在 svg 尺寸之外：

对于第一个按钮，圆圈位于 svg 之外，因此您可以像这样调整高度：

// --- svg append origin circle ----------------------
svg
  .append("circle")
  .attr("cx", projection(destArray)[0])
  .attr("cy", projection(destArray)[1])
  .attr("r", 4)
  .attr("fill", "#338bff");
        
  const r = parseInt(svg.select("circle").node().getAttribute("r"));
  const cy = parseInt(projection(destArray)[1]) + 1; 
  const tcy = r + cy;
  if (tcy > height)
    svg.node().setAttribute("height",tcy);

如果需要，您可以对宽度进行相同的操作....

你可以检查小提琴