Увеличьте радиус круга при перетаскивании до тех пор, пока не будет запущено событие (D3js)

Question

У меня есть выбор circle в D3, радиус которого я хотел бы увеличить с шагом 1, начиная с события dragstart и заканчивая событием dragend. Например, если сопротивление активно в течение 100 мс, я хотел бы увеличить радиус на 1 пиксель, и если он будет активен в течение 400 мс, я хотел бы увеличить радиус на 4 пикселя.

Это может быть чисто JavaScript-вопрос, но я хотел бы узнать все лучшие методы D3 в этом процессе.

Вот мой JS/D3:

function increaseHoleRadius() { 
    // Increase radius of hole until dragend() runs 
    // e.g. -> hole.attr('r', count++) 
} 

function dragstart() { 

    // begin increasing radius of "hole" selection 
    increaseHoleRadius(); 
} 


function dragmove() { 

    // drag circle element 

    var m = d3.mouse(this); 

    currentX = m[0]; 
    currentY = m[1]; 

    circle.attr({ 
      cx: m[0], 
      cy: m[1] 
     }); 

} 

function dragend() { 

    // set hole selection back to initial radius 

    hole.attr({ 
      r: 20 
     }); 

} 

Вот working codepen. Обратите внимание, что в этом примере радиус hole только увеличивается , а элемент перетаскивается. Я хочу, чтобы радиус постоянно увеличивался, пока не закончилось событие перетаскивания.

Answer 1

Вы должны периодически называть функцию increaseHoleRadius, в то время как событие dragend не произошло.

Одним из решения является вызов рекурсивно increaseHoleRadius функция с SetTimeout 100 мс:

function dragstart() { 
    increase = true; 
    increaseHoleRadius(); 
} 

function increaseHoleRadius() { 
    if (increase) { 
     console.log("increase"); 
     hole.attr({ 
      r: function() { 
       return count++; 
      } 
     }) 
     setTimeout(increaseHoleRadius, 100); // 100ms 
    } 
} 

function dragend() { 
    console.log('dragend'); 
    increase = false; // stop the increaseHoleRadius function 
    [...] 
} 

Вот полный codepen решение: http://codepen.io/anon/pen/pjjPgM?editors=001