score:2

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) {
      svg.append("svg:line")
        .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 = d3.select(this).attr("cx"),
      y = d3.select(this).attr("cy");
});

Related Query

More Query from same tag