sync d3.js map and leaflet map

Question

В одном приложении у меня есть карта карт и карт-карт d3, я следую коду Майка, чтобы синхронизировать их (http://bost.ocks.org/mike/leaflet/) и нарисовать svg-точки на карте лифтов. Проблема в том, что некоторые точки, срезанные на краю контейнера SVG, и другие элементы SVG, добавленные позже (анимированный импульс в этом случае), будут только частично показаны. Интересно, есть ли в любом случае расширение контейнера SVG на основе связанных функций (точек).

рабочая демо здесь: http://xqin1.github.io/usschools/usac_school_stat.html, чтобы воспроизвести проблему: 1. выберите 'Число студентов ползунком до 5300-6545, две точки на карте Leaftlet только половина показано на рисунке. 2. щелкните по первой строке таблицы, карта увеличится до точки, но анимированный импульс будет отключен.

Любые предложения приветствуются.

благодаря Сяомину

Answer 1

Я имел эту проблему, а также, и нашел решение. Реферирование mbostock-х sample code вам просто нужно добавить немного дополнения к проектируемой ограничивающего параллелепипеда, который рассчитывается каждый сброс времени называется:

var bottomLeft = project(bounds[0]), 
     topRight = project(bounds[1]); 

Вставить что-то подобное (только после вышеуказанных заявлений):

var padding = 25; // In pixels, choose large enough to prevent edge clipping 
         // of your largest element 

    bottomLeft = [bottomLeft[0]-padding, bottomLeft[1]+padding] 
    topRight = [topRight[0]+padding, topRight[1]-padding]