1

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

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

这个问题类似于将现有对象用作剪切路径的简单方法？不同的是，需要为每个国家单独设置剪切路径。我只是不确定如何处理。

在理想的世界中，我会使用 SVG Strokes 扩展来简单地在路径内部绘制笔触，如下所述：你能控制如何绘制 SVG 的笔触宽度吗？

4

1 回答 1

0

我想我已经通过添加引用先前路径的 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))
于 2021-02-25T19:28:15.450 回答