Accepted answer

First, you need to append the line element to the top-level SVG or a g element, not a circle element, otherwise it won't be shown. So in your click handler, you would need to do this:

.on("click", function(d,i) {
        .attr("x1", 300).attr("y1", 300)
        .attr("x2", 50).attr("y2", 50)
        .style("stroke", "steelblue")
        .style("stroke-width", 3);

You can get the coordinates of the click either through d3.event or the coordinates of the circle itself, i.e.

.on("click", function(d,i) {
  var x = x(randomX[i]),
      y = y(d);

or even

.on("click", function(d,i) {
  var x ="cx"),
      y ="cy");

Related Query

More Query from same tag