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

У меня есть карта топологии с функциями панорамирования и масштабирования.

Нажимая на страну, я масштабирую / панорамирую страну, используя это:

  if (this.active === d) return

  var g = this.vis.select('g')
  g.selectAll(".active").classed("active", false)
  d3.select(path).classed('active', active = d)

  var b = this.path.bounds(d);
  g.transition().duration(750).attr("transform","translate(" +
    this.proj.translate() + ")" +
    "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / this.options.width, (b[1][1] - b[0][1]) / this.options.height) + ")" +
    "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");

  g.selectAll('path')
    .style("stroke-width", 1 / this.zoom.scale())

Однако, если я продолжу перетаскивать панорамирование, карта вернется в исходное положение до того, как произойдет щелчок, перед панорамированием. Код для панорамирования / масштабирования находится здесь:

  this.zoom = d3.behavior.zoom().on('zoom', redraw)
  function redraw() {

    console.log('redraw')

    _this.vis.select('g').attr("transform","translate(" +
      d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")")

    _this.vis.select('g').selectAll('path')
      .style("stroke-width", 1 / _this.zoom.scale())
  }
  this.vis.call(this.zoom)

Другими словами, после увеличения точки путем щелчка и последующего перетаскивания с помощью функции перерисовки, перерисовка не выбирает правильный перевод + масштаб для продолжения.


d3.js topology zooming topojson panning
person bcm    schedule 19.12.2013    source источник
comment
d3.select(path).classed('active', active = d) устанавливает класс active для всего в path. Вероятно, это не вызывает проблемы (если у вас нет кода, чтобы сосредоточиться на active путях в другом месте), но я думаю, вы имели в виду == там.   -  person musically_ut    schedule 19.12.2013
comment
путь - это просто путь страны, по которому щелкнули мышью. на активном классе нет кода.   -  person bcm    schedule 19.12.2013
comment
Я удалил свой ответ, поэтому этот вопрос может привлечь больше внимания. Не думаю, что полностью понимаю проблему. Может помочь добавление рабочего примера с проблемой.   -  person musically_ut    schedule 19.12.2013
comment
Думаю, я не совсем понимаю d3.event.translate и d3.event.scale ... и то, как эти 2 свойства могут быть неверными / неожиданными после запуска первого блока кода (щелкните, чтобы центрировать) ...   -  person bcm    schedule 19.12.2013
comment
Пытались следовать этому примеру ... но отличие в том, что в этом примере нет масштабирования и панорамирования - bl.ocks .org / larskotthoff / f7340645d4cda3ff6ac5.   -  person bcm    schedule 19.12.2013
comment
Похоже, здесь та же проблема: groups.google.com/ forum / #! topic / d3-js / -qUd_jcyGTw / обсуждение, но используется разрешение D3 версии 2 .... Я пытаюсь перейти на версию 3   -  person bcm    schedule 20.12.2013

Ответы (1)


arrow_upward
8
arrow_downward

Чтобы продолжить правое «масштабирование» после перехода, мне пришлось установить масштаб на новый перевод и масштаб.

Пример сброса, который применяется аналогично моему событию щелчка и масштабирования, установка новой точки масштабирования является критическим битом:

_this.vis.select('g').transition().duration(1000)
   .attr('transform', "translate(0,0)scale(1)")

/* SET NEW ZOOM POINT */
_this.zoom.scale(1);
_this.zoom.translate([0, 0]);
person bcm    schedule 19.12.2013
comment
извините, не могли бы вы сказать мне, что такое _this? - person Awakening; 10.09.2014
comment
@Awakening zoom.scale (..) и zoom.translate (...) работают с var zoom = d3.behavior.zoom (); - person collinglass; 29.01.2015