d3 上下文图表高斯模糊

Question

我正在创建一个交互式 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 元素（因为它们是动态加载的）？有没有其他方法可以做到这一点？

Answer 1

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

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

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