score:1

You will need to know the mouse position and apply it to the current x and y. Did some changes, have a look at mousePosition, you need a little more work to make it perfect, but you will get the idee

    let width = 960,
        height = 500,
        radius = 3,
        transform = d3.zoomIdentity
    
    let canvas = d3.select("body").append("canvas")
      .attr("width", width)
      .attr("height", height)

    let ctx = canvas.node().getContext("2d");
    
   	let data = d3.range(200)
    							.map(() => { return {"x": d3.randomNormal()(),
                                       "y": d3.randomNormal()()}})
    
    let scaleX = d3.scaleLinear()
    								.domain(d3.extent(data, function(d){return d.x}))
    								.range([0, width])
    
    let scaleY = d3.scaleLinear()
    								.domain(d3.extent(data, function(d){return d.y}))
    								.range([height, 0])
    
    //canvas.call(d3.zoom()
    //            		.on("zoom", zoomed))
    
    canvas.call(d3.drag()
                		.subject(dragSubject)
               			.on("drag", dragged))
    
    function zoomed(){
      transform = d3.event.transform
      render()
    }
    
    function dragSubject(){
   
    	x = d3.event.x 
      y = d3.event.y
      

      for(let i = 0; i < data.length; i++){

        point = data[i]
        dx = x - scaleX(point.x)  
        dy = y - scaleY(point.y) 

        if (dx * dx + dy * dy < radius * radius){          
          return data[i];
        }
      }
    }
    
    
    // get the position of the mouse, you need to calculate scale to
    function mousePosition(event) {
            if (event == undefined || (!event.pageX && !event.offsetX))
             return {x:0, y:0}
            return { x: event.pageX || event.offsetX, y: event.pageY || event.offsetY };
        };
    
    function dragged(){
      
      var mouse = mousePosition(window.event)
      d3.event.subject.x = scaleX.invert(d3.event.x + (mouse.x)) 
      d3.event.subject.y = scaleY.invert(d3.event.y + mouse.y) 
   

      render()
    }
    
    function render(){
      ctx.save()
      ctx.clearRect(0, 0, width, height)
      
      ctx.beginPath()
      //ctx.translate(transform.x, transform.y)
      //ctx.scale(transform.k, transform.k)
      
      data.forEach(function(d){
        ctx.moveTo(scaleX(d.x) + radius, scaleY(d.y))
        ctx.arc(scaleX(d.x), scaleY(d.y), radius, 0, Math.PI * 2)
      })
      ctx.stroke()
      
      /*
      ctx.globalAlpha = 0.2
      ctx.fillStyle = "blue"
      ctx.fillRect(0,0,width,height) */
      
      ctx.restore()
    }
    
    render()
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>

</body>


Related Query

More Query from same tag