Как перетащить несколько svg-элементов, используя d3. js - PullRequest
Новая
       5

Как перетащить несколько svg-элементов, используя d3. js

1 голос
/ 05 марта 2020


Мне нужно переместить некоторые SVG-элементы с помощью мыши.

Для этого я начал использовать каркас d3. Моя проблема заключается в следующем. Мне нужно переместить некоторые элементы, которые сгруппированы, как это, в одно и то же время (так как они были выбраны): 

<g transform="translate(10, 10)" id="158" class="draggable preview symbol" pointer-events="fill">
  <rect class="CDC300" x="80" y="100" width="41" height="41" fill="none"></rect>
  <line class="CDC300" x1="140" y1="120" x2="121" y2="120" fill="none"></line>
  <text class="CDC300" x="100" y="131" fill="#000000" text-anchor="middle" font-size="30px" font-family="sans-serif" stroke-width="0.3">T</text>
  <text id="20010" class="CDC400" x="75" y="125" text-anchor="end">=HTC+HSP1</text>
  <circle class="insertpoint" cx="140" cy="120" r="3"></circle>
  <circle class="pin" cx="140" cy="120" r="2"></circle>
</g>

<g transform="translate(180,20)" id="159" class="draggable preview symbol" pointer-events="fill">
  <rect class="CDC300" x="80" y="100" width="41" height="41" fill="none"></rect>
  <line class="CDC300" x1="140" y1="120" x2="121" y2="120" fill="none"></line>
  <text class="CDC300" x="100" y="131" fill="#000000" text-anchor="middle" font-size="30px" font-family="sans-serif" stroke-width="0.3">T</text>
  <text id="20010" class="CDC400" x="75" y="125" text-anchor="end">=HTC+HSP1</text>
  <circle class="insertpoint" cx="140" cy="120" r="3"></circle>
  <circle class="pin" cx="140" cy="120" r="2"></circle>
</g>

Конечно, я мог бы перетащить их, используя функцию перетаскивания d3 но ... я понятия не имею, как переместить два сгруппированных "символа", не теряя исходного преобразования.

Я создал простой пример для JS -fiddle :

есть идеи? - может быть больше символов, поэтому любая переменная stati c невозможна.

ОБНОВЛЕНИЕ:

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

$(document).ready(function() {
  d3.selectAll('.symbol')
  .on("mouseover", onMouseOver)
  .on("mouseout", onMouseOut)
  .call(d3.drag()
    .on("start", dragStart)
    .on("drag", dragging)
    .on("end", dragEnd));
})

var xpos = 0;
var ypos = 0;

function dragStart() {
  var movinggroup = d3.select('svg')
  .append('g')
  .classed('moving', true);

  d3.selectAll('.draggable').remove()
    .each(function(){
      movinggroup.node().appendChild(d3.select(this).node());
    });
}

function dragging() {
  xpos = xpos + d3.event.dx;
  ypos = ypos + d3.event.dy;
  d3.select('.moving').attr("transform", "translate("+ xpos+ " " + ypos + ")");
}

function dragEnd() {
  console.log("dragEnd");
  var transform = getTranslation(d3.select('.moving').attr('transform'));
  var newX = transform[0];
  var newY = transform[1];

  d3.select('.moving').selectAll('.draggable')
    .each(function(){
      var transform2 = getTranslation(d3.select(this).attr('transform'));
      var xPos = transform2[0] + newX;
      var yPos = transform2[1] + newY;
      d3.select(this).attr('transform', 'translate('+ xPos + ' ' + yPos + ')');
      d3.select('svg')
        .node()
        .appendChild(d3.select(this).node());
  });
  d3.selectAll('.moving').remove();
}

function getTranslation(transform) {
  var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
  g.setAttributeNS(null, "transform", transform);
  var matrix = g.transform.baseVal.consolidate().matrix;
  return [matrix.e, matrix.f];
}

Теперь у меня есть последняя проблема ... В тот момент, когда я начинаю перетаскивать элементы, иногда прыгаю на курсор. Как я могу избежать этого?

Актуальная JS версия скрипта

Спасибо Карстен.

...