javascript - D3js 在鼠标悬停时应用阴影

标签 javascript svg d3.js

我有一个gist (请参阅预览 here )了解应用过滤器的潜在方式。 我不确定如何有条件地将其应用到触发鼠标悬停的矩形上。到目前为止我看到的示例是应用过滤器 ID,但如果我像上面的示例一样更改过滤器属性,它会影响所有元素。

我实际上正在寻找框阴影来指示选择(如 here ) 如果您可以将模糊更改为阴影,那就太好了。

谢谢。

最佳答案

一种方法是使用 CSS :hover 规则应用过滤器属性,请参阅 this example .

定义模糊滤镜,类似于您已经完成的操作,然后使用如下 CSS:

rect:hover { filter: url(#blur); }

您可能还应该指定一个稍大的过滤区域,否则您的模糊将会被剪切。

关于javascript - D3js 在鼠标悬停时应用阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12600942/

相关文章:

javascript - Html5 div 在 Canvas 上跨浏览器

javascript - knockout js observable extensions 的执行顺序是什么?

javascript - JEST 和 ES6 导入 - 基于根文件夹的导入不起作用

html - 我可以使用 svg 图像(即 xml)作为 list-style-image CSS 属性吗?

javascript - 使用 D3JS 的 div 中的 img 和 p

d3.js 选择器不返回实际对象

javascript - 为什么在将 `maxlength` 属性设置为 `input` 时不能使用点表示法?

javascript - 如何访问 Elm 中的图像数据?

svg - 如何在使用时更改SVG图案的颜色?

javascript - D3 翻译值