如何解决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))
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。