Я создаю карту с помощью Leaflet и D3. Я ввожу точки в виде слоя листовки. Я хотел бы привязать всплывающие окна для этих точек, которые включают графику SVG во всплывающем окне.
Кто-нибудь видел примеры этого? Я думаю, что это возможно, поскольку HTML разрешен во всплывающем окне, но я хотел бы найти рабочий пример.
Спасибо,
Ли
Это определенно возможно. Используйте HTML во всплывающем окне, как обычно. Например, вы можете добавить элемент <div class="popupGraph"/> во всплывающее окно. Затем просто используйте JavaScript, как обычно, для отображения всего, что вы хотите в этом элементе.
Изменить: я добавлю еще немного примера. У меня совершенно другой внешний вид всплывающего окна, поэтому я расширил свой собственный.
myPopup = L.Popup.extend({ ... });
Когда я инициализирую всплывающее окно, я добавляю оболочку для элемента div, который позже буду расширять с помощью JavaScript Graph API (я использую JQuery Sparklines http://omnipotent.net/jquery.sparkline/).
this._graphContainer = L.DomUtil.create('div', 'myGraph', this.container);
Тогда я могу относиться к этому как к любому другому графику.
$(this._graphContainer).sparkline({ /*my options here*/ });
Это отобразит живой, обновляемый график во всплывающем окне.
_initLayout в объекте L.Popup. Вы можете видеть, где создаются все элементы DOM для всплывающего окна при вызове этого кода. Установите там точку останова и обратите внимание на поведение. Используйте L.DomUtil.create для создания элементов DOM, чтобы добавить в файл container. В своем коде вы можете создать элементы DOM для своего graphContainer, как я описал в своем ответе. Как только вы создадите этот контейнер, вы можете обращаться с ним так же, как с любым обычным графиком.
- person Patrick D; 23.05.2013
