score:0

I think I've essentially solved this problem by adding clipPath elements which refer to the previous paths (with the "use" tag).

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

Related Query

More Query from same tag