D3js зум с функцией сброса - PullRequest
Новая
       29

D3js зум с функцией сброса

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

Я использую D3js для проекта и требую функцию масштабирования И возможность сброса масштаба.Моя проблема в том, что функции масштабирования действуют так, как будто сброса никогда не происходит.Вот код, который у меня есть: 

function load() {
  var svg = d3.select("body")
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%");
  var zoom = d3.zoom().on("zoom", function() {
    d3.select("#vis").attr("transform", d3.event.transform);
  });
  var vis = svg.call(zoom).append("g").attr("id", "vis");
  d3.select("body").on("keypress", function() {
    if (d3.event.shiftKey) {                                                                                                        
      if (d3.event.key == "R") {                                                                                                    
        vis.transition().duration(500).attr("transform", d3.zoomIdentity);
      }
    }
  });
  vis.append("rect")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", 100)
    .attr("height", 100);
}

Вот рабочий пример проблемы: http://bl.ocks.org/nicmcd/a74b0bfba61f50d932dedd6534ad7d9e

Как получить действие сброса, чтобы сбросить внутреннее состояние возможности масштабированиятак что будущие события будут основываться на состоянии сброса?

1 Ответ

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

Есть две проблемы с моим кодом.Во-первых, переход должен происходить из svg, а не vis.Во-вторых, преобразование сброса не может быть выполнено вручную с помощью attr(), это должно быть сделано с помощью call().Вот исправленный код, который работает: 

  function load() {
    var svg = d3.select("body")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%");

    var zoom = d3.zoom().on("zoom", function() {
      vis.attr("transform", d3.event.transform);
    });

    var vis = svg.append("g").attr("id", "vis");
    svg.call(zoom);

    d3.select("body").on("keypress", function() {
      svg.transition().duration(500).attr("transform", d3.zoomIdentity)          
    });

    vis.append("rect")
      .attr("x", 10)
      .attr("y", 10)
      .attr("width", 100)
      .attr("height", 100);
  }

Вот рабочий пример: http://bl.ocks.org/nicmcd/4c730aa64c04bf100a58f224b90c2ff4

Спасибо Эндрю Рейду за указание на ошибки.

...