Javascript 如何在 map 中显示美国州加拿大省的缩写第1部分

原问题分成两部分--&应法国人的建议

1)如何在clipPath中显示所有touch 状态的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 });

here's my full jsfiddle example个

如有需要，敬请惠顾！