Масштаб карты и панорамирование в d3 js v4 + предел масштаба - PullRequest
Новая
       37

Масштаб карты и панорамирование в d3 js v4 + предел масштаба

0 голосов
/ 29 июня 2018

  1. У меня есть эта d3 js карта. Я пытался сделать такую ​​простую вещь, как зум и кастрюлю и просто заглох. Теперь только точки увеличивают (я использую v4). Как «синхронизировать» масштабирование и панораму точек и svg карты?

  2. Как установить пределы масштабирования и панорамирования в d3 v4? Я хочу, чтобы это было похоже на это 

var svg = d3.select("body")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .style("border","none") 
          .style("background-color", "none")
          .call(d3.zoom().on("zoom", function () {
          svg.attr("transform", d3.event.transform)
                 }))
          .append("g");

1 Ответ

0 голосов
/ 29 июня 2018

Круги масштабируются, но пути не из-за того, как вы их добавляете. Во-первых, давайте посмотрим, как применить увеличение: 

var svg = d3.select("body")
      .append("svg")
      ...
      .call(d3.zoom().on("zoom", function () {
      svg.attr("transform", d3.event.transform)
             }))
      .append("g");  // returns a selection of a newly appended g element

Таким образом, выбор svg на самом деле является g элементом. Хотя zoom вызывается для элемента svg (не для выбора svg), он изменяет выбор svg (который фактически содержит g): svg.attr(("transform"....

Когда вы добавляете свои пути, вы используете var map = d3.select("svg").insert(... и создаете новый g для хранения путей. Но - этот g не входит или не является дочерним для выбора svg - поэтому он не обновляется: d3.select("svg") != svg в этом случае. Вместо этого используйте: 

 var map = svg.insert(...  // we insert into the svg selection which holds a g

Таким образом, мы вставляем элементы в родительский элемент g, который обновляется при каждом увеличении.

Хотя это действительно второй вопрос, решение достаточно простое. Поведение d3.zoom () может быть ограничено как масштабированием, так и переводом: 

d3.zoom().scaleExtent([1,4]) // limit scale to full size or 4x size.
   .translateExtent([[0,0],[width,height]])  // limit pan to original SVG dimensions

zoom.translateExtent([p1,p2]) занимает две точки, верхний левый и нижний правый. Мы можем ограничить на основе этих измерений, если ваши объекты не выходят за границы SVG при первоначальной загрузке со шкалой 1.

Вот обновленный bin .

...