block by steveharoz 84150ed4a12203d0ba8e5ad18881c559

mouse delay

Full Screen

Move the mouse smoothly from side to side to see a lag in the circle’s position.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
    height = 500;
var mouseLocation = [0,0];

var svg = d3.select("body").select("svg")
    .attr("width", width)
    .attr("height", height);

var cursor = svg.append('circle')
    .attr("r", 2)
    .attr("fill", 'darkblue');

// update mouse location
d3.select(window).on("mousemove", () => { mouseLocation = d3.mouse(svg.node()); });

// show mouse
d3.timer(function() {
  cursor.attr("transform", 'translate(' + mouseLocation + ')');
});

</script>