title: Is there a way to reduce lagging of a guideline that follows the mouse pointer?
body: <p>I have a vertical guideline across my svg that follows the mouse pointer, but right now it's kind of slow to update its position, something that's especially noticeable with rapid mouse movements. Is there a way to reduce this lag?</p>
  
  <p>Current code:</p>
  
  <pre><code>svg.on("mousemove", function(d) {
      svg.select(".guideline")
          .attr("x1", d3.mouse(this)[0]-1)
          .attr("x2", d3.mouse(this)[0]-1);
  
  });
  
  svg.on("mouseover", function(d) {
      svg.append("line")
          .attr("class", "guideline")
          .attr("y1", margin[0])
          .attr("y2", height+margin[0])
          .attr("opacity", originOpacity)
          .attr("stroke", "#333")
          .attr("pointer-events", "none");
  
  });
  
  svg.on("mouseout", function(d) {
      svg.select(".guideline").remove();
  });
  </code></pre>