Dragging element with d3.mouse(this) causes flickering of element

Question

I have an absolutely positioned leading line within a relatively positioned div. I need to move the leading line horizonatally as the mouse moves using d3. Since d3.event requires the elements to be positioned within g elements, I am trying to use d3.mouse to move the leading line. However, the dragging behaviour is very erratic and flickers too much. I cannot seem to figure out what is causing this.

var drag = d3.behavior
  .drag()
  .on('drag', function(event) {
    dragMoveNew(this);
})

d3.select(".grid").call(drag);

function dragMoveNew(elem) {
     var x = d3.mouse(elem)[0];

   $(elem).css('left', x);
}

Here is the jsfiddle link

https://jsfiddle.net/u4koenra/

Answer 1

Use d3.event.x

function dragMoveNew(elem) {
   //var x = d3.mouse(elem)[0];
   var x = d3.event.x;

   $(elem).css('left', x);
}