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