1

我正在创建一个交互式 d3 应用程序，该应用程序具有与 Bostock 的焦点/上下文刷亮示例非常相似的界面的一部分：

http://bl.ocks.org/mbostock/1667367

到目前为止一切正常，但这就是我想要做的。我想采用画笔范围未选择的上下文区域（底部图表）和高斯模糊画笔背景上的区域（以及它后面的 svg 图表路径和 x 轴）。基本上，我试图产生类似这样的效果：

http://bl.ocks.org/mbostock/4349545

但由于我的图表是一条路径而不是一堆小圆圈，所以我不能简单地更改所选区域的路径类。

我的解决方案是在画笔范围的左侧和右侧绘制几个矩形，并使用填充不透明度等设置这些矩形的样式，这会产生类似于画笔句柄示例的“去强调”效果。

在此处输入图像描述

然而，对于真正的高斯模糊，它似乎更棘手。我可以对区域本身进行 SVG 过滤器，但这只会模糊矩形的边缘（它不会对通过它们可见的所有内容应用模糊效果）。我的下一个解决方案是尝试从画布中获取 BackgroundImage 并对其进行模糊处理，就像您在此处看到的那样：

http://www.w3.org/TR/SVG/filters.html#AccessingBackgroundImage

但是为了我的生活，我无法让它工作。浏览器是否支持 BackgroundImage？我是否需要告诉 d3 重新调用我的一些页面元素以在我的画笔回调中重新绘制 svg 元素（因为它们是动态加载的）？有没有另一种方法可以做到这一点？

4

1 回答 1

0

背景图像仅在 IE10 和 Opera 中受支持 - 所以您所做的将在 Windows 8 中运行！显而易见的解决方法是通过 feImage 将原始背景对象拉入过滤器。这适用于 IE10、Opera 和 Webkit，但IE10+Opera 对提供给 feImage的内部内容引用的 x,y 坐标的处理方式与 Webkit 不同。

下一级解决方法是在过滤器效果中进行整个覆盖层，并在内容组上设置过滤器。这是完全可能的（但让它在 d3 中工作可能有点复杂）

一些灵感：http ://codepen.io/mullany/pen/mnBqK

于 2013-04-25T21:58:14.020 回答