D3: d3.behavior.drag

Question

Я пытаюсь this пример, и я применил d3.behavior.drag с функцией

var drag = d3.behavior.drag() 
     .on("drag", function(d,i) { 
      d.x += d3.event.dx 
      d.y += d3.event.dy 
      d3.select(this).attr("transform", function(d,i){ 
       return "translate(" + [ d.x,d.y ] + ")" 
      }) 
     }); 

Пожалуйста, смотрите мой пример here.

Моя проблема после перетаскивания svg.

Когда я нажимаю на элемент, зум не очень хорошо работает.

Например, корень исчезает ...

Как исправить эту ситуацию?

Thanks, Carlos.

Answer 1

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

Вам необходимо проигнорировать событие щелчка, если оно было подавлено (т. Е. При перетаскивании).

Изменить ваш клик обработчик события, как

function click(d) { 
    // Ignore the click event if it was suppressed 
    if (d3.event.defaultPrevented){ 
    return; 
    } 
    path.transition() 
     .duration(750) 
     .attrTween("d", arcTween(d)); 
    }; 

Answer 2

Учитывая в вашем случае, что элемент может быть втянута и щелкнул, в дополнение к ответу PRASHANT, вы хотите, чтобы подавить щелчок на сопротивление следующим образом:

drag.on("dragstart", function() { 
 
    d3.event.sourceEvent.stopPropagation(); // silence other listeners 
 
});

http://bl.ocks.org/mbostock/6123708 См для примера :-)

Answer 3

использовать это, d3.event.sourceEvent.stopPropagation();