Draw a path when click on the red point

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
  <script>
  var svgSelection = d3.select("body")
      .append("svg")
      .attr("width", 500)
      .attr("height", 500)

var pointOne = d3.select("svg")
      .append("circle")
      .attr("cx", 50)
      .attr("cy", 50)
      .attr("r",  10);

var pointTwo = d3.select("svg")
      .append("circle")
      .attr("cx", 250)
      .attr("cy", 250)
      .attr("r",  10)
      .style("fill", "red");

var simplePath = svgSelection.append("path")
         .attr("d", "M50 50 L 250 250")
      .attr("stroke", "steelblue")
      .attr("stroke-width", "0")
      .attr("fill", "none");

var pathTotalLength = simplePath.node().getTotalLength();

pointTwo.on("click", function() {
    simplePath
        .attr("stroke-dasharray", pathTotalLength + " " + pathTotalLength)
        .attr("stroke-dashoffset", pathTotalLength)
        .transition()
          .duration(2000)
          .attr("stroke-dashoffset", 0)
          .attr("stroke-width", "2");
  });

</script>
  </body>
</html>

https://d3js.org/d3.v4.min.js