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