Перетаскивание поведения вместе с отзывчивостью в svg с использованием d3.js - PullRequest
Новая
       32

Перетаскивание поведения вместе с отзывчивостью в svg с использованием d3.js

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

Как я могу реализовать поведение перетаскивания вместе с отзывчивостью в svg, используя d3.js?

Под отзывчивостью я подразумеваю, что при изменении размера до любого разрешения экрана элементы, которые я рисовал в элементе svgсохранит соотношение сторон.

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

Вот моя неудачная попытка решить проблему: я решил покончить с отзывчивостью, используя только % юнитов.Итак, теперь, например, когда я рисую круг и указываю stroke-width равным 1%, а затем я решаю изменить размер окна, в котором отображается svg, содержащий circle, или когда я переключаю устройство с ПК нателефон stroke-width действительно все равно будет 1% относительно элемента svg.Здесь атрибуты svg width и height установлены на 100%, чтобы охватить весь родительский элемент (например, div).

Теперь я хочу решить проблему, связанную свключение поведения перетаскивания.Я могу сказать, что у меня есть некоторые базовые навыки, используя viewBox.Итак, я знаю, что желаемое поведение при перетаскивании может быть легко достигнуто путем манипулирования атрибутами x и y, если атрибут svg viewBox.Я просто поменяю x и y и части svg, которые видит пользователь, могут быть изменены (теперь пользователь может видеть материал в любой части svg canvas).Но вот проблема, я знаю, как это сделать, используя числа (любые единицы, которые не являются % единицами).Итак, я ожидаю, что % юниты будут вести себя одинаково.Например, svg всегда имеет фиксированную ширину и высоту, даже если они (ширина и высота) указаны в %.Следовательно, я ожидаю, что когда я поставлю атрибут x для viewBox равным 100%, я точно увижу ту часть холста svg, которая на 100% слева и 100% определяется соответственно.

Здесь - это код, который я пробую.

Вот часть .js: 

var svg = d3.select("#drawRegion")
                .append("svg")
                .attr("width", "100%")
                .attr("height", "100%");

svg.append("rect")
    .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");


for(var i = 0; i < 10; ++i) {
svg.append("circle")
    .attr("cx", ((i*20)+10)+"%")
  .attr("cy", "50%")
  .attr("r", "5%")
  .attr("stroke", "black")
  .attr("stroke-width", "1%")
  .attr("fill", '#'+Math.floor(Math.random()*16777215).toString(16));
}
svg.viewBoxInfo = {
    x: 0,
    y: 0,
    width: "100%",
    height: "100%",
    maxX: 150,
    minX: 0,
    maxY: 0,
    minY: 0,
    stringRepresentation: function() {
      if(this.x > this.maxX) {
        this.x = this.maxX;
      } else if(this.x < this.minX) {
        this.x = this.minX;
      }

      if(this.y > this.maxY) {
        this.y = this.maxY
      } else if(this.y < this.minY) {
        this.y = this.minY;
      }

      return this.x + "% " + this.y + "% " + this.width + "% " + this.height + "%";
    }
};

 var prepareDraggingBehaviour = function(svg){
     var panning = null;
     var currentMouse = null;

     var onMouseDownSvg = function() {
       panning = d3.mouse(this);
     };
     var onMouseMoveSvg = function() {
       currentMouse = d3.mouse(this);
       if (panning)  {
         svg.viewBoxInfo.x += (panning[0] - currentMouse[0]);
         svg.viewBoxInfo.y += (panning[1] - currentMouse[1]);
         svg.attr("viewBox", svg.viewBoxInfo.stringRepresentation());
       }
     };
     var onMouseUpSvg = function() {
       panning = null;
     };

     svg.on("mousedown", onMouseDownSvg);
     svg.on("mousemove", onMouseMoveSvg);
     d3.select(window).on("mouseup", onMouseUpSvg);
 };
 prepareDraggingBehaviour(svg);

И когда все должно работать, яполучаю ошибку, которая говорит мне, что % не может быть значением для атрибутов x и y viewBox:

Ошибка: атрибут viewBox: ожидаемое число, "150%0% 100 %% 100 %% ".`

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

...