is point on path

by Shyam Bhiogade

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<svg width="400" height="400">
  <g>
    <path id="mypath" d="M10 200 L200 90 L200 200" fill="transparent" stroke="black" stroke-width="5" />
    <rect class="interactiveArea" width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);opacity:0.2" />
    <line id="myline" x1="20" y1="0" x2="20" y2="400" stroke-width="2" stroke="black" />
  </g>
</svg>

CSS

.myDiv {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

JavaScript

$(document).ready(function() {
  //your code here
  debugger;
  var i = 0;
  d3.select(".interactiveArea").on("mousemove", function(event) {
    var point = d3.event.pageX;
    var svgpoint = d3.select("#mypath").node().getPointAtLength(point);
    console.info(svgpoint);
    d3.select("#myline").attr({
      x1: d3.event.pageX,
      x2: d3.event.pageX
    });
  });
});