D3 컨텍스트 차트 가우시안 블러

Question

내가 닦고 예를 Bostock의 초점/상황과 매우 유사한 인터페이스의 한 부분이있는 대화 형 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에 지시해야합니까 (동적으로로드되기 때문에)? 이 일을하는 또 다른 방법이 있습니까?

Answer 1

배경 이미지는 IE10 및 Opera에서만 지원되므로 Windows 8에서 작동합니다. 확실한 해결 방법은 원래 배경 개체를 feImage를 통해 필터로 가져 오는 것입니다. 이것은 IE10, Opera 및 Webkit에서 작동하지만 내부 콘텐츠 참조는 Webkit과 다르게 IE10+Opera treats the x,y coordinates supplied to feImage입니다.

다음 단계의 해결 방법은 필터 효과에서 전체 오버레이를 수행하고 콘텐츠 그룹에 필터를 설정하는 것입니다. 즉, 완벽하게 가능 (하지만 약간은 D3에서 작동하도록 복잡 할 수도 있습니다) 일부 영감을

을 : 그것은 웹킷처럼 보인다 http://codepen.io/mullany/pen/mnBqK