D3：如何将 D3 生成的 SVG 路径的笔划剪裁到同一路径的内部？

问题描述

我有一张在 Observable 上使用 D3 的等值线图。当用户将鼠标悬停在一个国家上时，边界（路径）会重新绘制为红色。我想让这个边界在路径的内部延伸。

这是页面：https://observablehq.com/d/33b758c361e919e8

这个问题类似于Simple way to use existing object as a clipping path?，不同的是需要为每个国家单独设置剪切路径。我只是不确定如何处理。

在理想情况下，我会使用 SVG strokes 扩展来简单地在路径内部绘制笔画，如下所述：Can you control how an SVG's stroke-width is drawn?

解决方法

我想我已经通过添加引用先前路径的 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))