D3背景图高斯模糊

Question

我创建具有界面的一个组成部分，这是非常相似的博斯托克的焦点/背景刷牙例如交互式D3应用：

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

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

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

但因为我的图是一个路径，而不是一堆小圆圈的，我不能简单地改变路径类地区那是选中的。

我的解决方案是在画笔范围的左侧和右侧绘制几个矩形，并使用fill-opacity等对这些矩形进行样式设置，从而创建类似于画笔手柄示例的“去强调”效果。

然而，对于真正的高斯模糊，似乎棘手。我可以在区域本身上执行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