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))