D3：如何將使用 D3 生成的 SVG 路徑的筆畫剪輯到同一路徑的內部？

Question

我有一個 choropleth map 在 Observable 上與 D3 一起工作。 當用戶將鼠標懸停在一個國家/地區上時，邊界（路徑）被重新繪制為紅色。 我想讓這個邊界在路徑的內部延伸。

這是頁面： https://observablehq.com/d/33b758c361e919e8

這個問題類似於Simple way to use existing object as a clipping path？ 不同的是，需要為每個國家單獨設置剪切路徑。 我只是不確定如何處理。

在一個理想的世界中，我會使用 SVG Strokes 擴展來簡單地在路徑內部繪制筆觸，如下所述： 你能控制如何繪制 SVG 的筆觸寬度嗎？

Answer 1

我想我已經通過添加引用先前路徑的 clipPath 元素（使用“use”標簽）從根本上解決了這個問題。

   svg
    .append("g")
    .attr("id", "map")
    .selectAll("path")
    .data(topojson.feature(world, world.objects.countries).features)
    .join("path")
    .attr("class", "country")
    .attr("fill", d => color(value.get(d.properties.name)))
    .attr("id", d => `${d.id}`)
    .attr("d", path);
  
  svg
    .append("g")
    .selectAll("clipPath")
    .data(topojson.feature(world, world.objects.countries).features)
    .join("clipPath")
    .attr("id", d => `${d.id}_clip`)
    .append("use")
    .attr("xlink:href", d => new URL(`#${d.id}`, location))