Я создаю интерактивное приложение 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 из браузера? Нужно ли мне указывать d3, чтобы он повторно вызывал некоторые элементы моей страницы, чтобы перерисовать элементы svg (поскольку они загружаются динамически) внутри моего обратного вызова кисти? Есть ли вообще другой способ сделать это?
