拖动时增加圆半径直到触发事件（D3js）

Question

我在D3中有一个circle选项，其半径我希望以dragstart事件开始并以dragend事件结束的增量增加1。例如，如果拖动激活100ms，我希望半径增加1个像素，如果拖动激活400ms，我希望半径增加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的半径仅增加，而正在拖动元素。我希望半径不断增加，直到阻力事件结束。