ボストックのフォーカス/コンテキスト ブラッシングの例と非常によく似たインターフェイスの一部を持つインタラクティブな d3 アプリケーションを作成しています。
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 はブラウザからサポートされていますか? ページ要素の一部を再呼び出しして、svg 要素をブラシ コールバック内で再描画するように d3 に指示する必要がありますか? これを行う別の方法はありますか？