D3 - Центр и масштабный сектор на карте

Question

У меня возникают некоторые проблемы, которые я, похоже, не разбираюсь, ради сохранения этого простого, я буду использовать только примеры акций, чтобы объяснить, что я ищу.

http://bl.ocks.org/mbostock/5126418 - Эта базовая функциональность

Что я ищу, чтобы сделать это, когда «Тракт» щелкают на карте скрыта, и выбранный Тракт центрируется на экране и расширенный

Моя проблема заключается в том, что каждый раз, когда я пытаюсь это сделать, выбранный объект просто вытесняется с экрана.

Я уверен, что я делаю что-то неправильно, я новичок в D3 и только использовали его в течение нескольких дней

.on("click", function(d){ 
    svg 
    .append("g") 
    .attr("id", "tract") 
    .append("g") 
    .attr("id", "wrapper") 
    .selectAll("path") 
    .data([d]) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .attr("id", "tract"), 
d3.select("#wrapper") 
      .transition() 
      .duration(800) 
      .ease("cubic-bezier(0.785, 0.135, 0.150, 0.860)") 
      .attr("transform", "scale(" + 3 + "), translate(" + (width/2) + ", " + (height/2) + ")"); 
}) 

Это было сводит меня с ума, так что любая помощь будет принята с благодарностью.

Answer 1

Я также очень новичок в d3 - попытаюсь объяснить, как я это понимаю, но я не уверен, что все правильно.

Выступ имеет концепцию центра, приведенной в единицах карты:

projection.center ([расположение])

Если задан центр, задает центр проекции на указанное место, двухэлементный массив долготы и широты в градусах и возвращает проекцию. Если центр не указан, возвращает текущий центр, который по умолчанию равен ⟨0 °, 0 °⟩.

Существует также перевод, в котором на экране расположен проекционный центр в пикселях.

projection.translate ([точка])

Если указана точка, устанавливает перевод проекции в смещение указанного два элемента массива [х, у] и возвращает проекцию. Если точка не указана, возвращает текущее смещение сдвига, которое по умолчанию равно [480, 250]. Смещение сдвига определяет координаты пикселя центра проекции. Перемещение по умолчанию смещает ⟨0 °, 0 °⟩ в центр области 960 × 500.

Секрет в том, что некоторые методы действуют на картографическом пространстве и другие на холсте.

Для того, чтобы центрировать функцию на холсте, как установить центр проекции в центр ограничивающего прямоугольника - это работает для mercator (WGS 84, используемого на картах Google), не уверен в других прогнозах.

Например, если проекция и путь:

var projection = d3.geo.mercator() 
    .scale(1); 

var path = d3.geo.path() 
    .projection(projection); 

bounds метод из path возвращает ограничивающий прямоугольник в пикселях. Используйте его, чтобы найти правильный масштаб, сравнивая размер в пикселях с размером в единицах карты (0.95 дает запас на 5% по сравнению с наиболее пригодным для ширины или высоты):

var b = path.bounds(feature), 
    s = 0.95/Math.max(
        (b[1][0]-b[0][0])/width, 
        (b[1][1]-b[0][1])/height 
       ); 

Используйте метод d3.geo.bounds найти рамку в единицах карты:

b = d3.geo.bounds(feature); 

Установите центр проекции в центре ограничительной рамки:

projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]); 

Используйте метод translate, чтобы переместить центр карты в центре холста:

projection.translate([width/2, height/2]); 

К настоящему моменту вы должны иметь функцию в центре карты, увеличенную с шагом 5%.