Блог

У меня возникли проблемы с некоторыми переходами d3. При нажатии на SVGCircleElement я хочу, чтобы SVGTextElement в том же SVGGElement, что и круг, исчезал, и как только это закончится, я хочу, чтобы появилось информационное окно. Вот соответствующий код.

 // code where vizNode is defined

// Circle is the SVGCircleElement
var circle = vizNode.svgNode

var drag = d3.drag()
    .on('start', function () {
        dragStart(this)
    })
    .on('drag', dragMove)
    .on('end', dragEnd);

function dragStart(d) { //drag start logic }
function dragMove(d) { //drag move logic }
function dragEnd(d) { //drag end logic }

// Call drag method on SVGCircleElement
d3.select(circle).call(drag)

// g is the SVGGElement containing the SVGTextElement with the circle and class '.node-text'
var g = d3.select(circle.parentNode) 

g.selectAll('.node-text').transition()
    .duration(longFade)
    .style('opacity', 0)
    .on('start', function () {
        vizNode.infoBoxFadeIn = true
    })
    .on('end', function () {
        vizNode.infoBoxFadeIn = false
        drawNewInfoBox(vizNode)
    })

//drawNewInfoBox method
  

Сначала это работает так, как ожидалось. Однако пользователь может перетаскивать круги, используя другой метод. После этого описанный выше метод внезапно перестает работать — функция .on (‘start) больше не вызывается.

Теперь большая проблема в том, что я понятия не имею, как это отладить. Все соответствующие переменные и объекты остаются неизменными, и выделение d3, которое я пытаюсь перенести, все еще существует после перетаскивания.

Есть ли у кого-нибудь советы о том, как подойти к этой проблеме?

РЕДАКТИРОВАТЬ: Обновленный код, чтобы включить метод перетаскивания