How to select point connectors on map in d3.js?
<p>I'm building a map users' connection using d3.js , i want to draw randomly links from any user's circle on click to 5 others, but i can't determine how to detect/sense the on click for particular point/circle.</p>

<p>here i attached my script:</p>

<pre><code>d3.json("users.json", function(error, data) {

                var tip = d3.tip()
                          .attr('class', 'd3-tip')
                          .offset([-10, 0])
                          .html(function(d) {
                            var name   = d.first_name,
                                email  = d.email,
                                gender = d.gender;

                            return "&lt;strong&gt;&lt;center&gt;Personal info &lt;/center&gt;&lt;/strong&gt;"+
                                    "Name  : &lt;span style='color:red'&gt;" + name +"&lt;/span&gt;&lt;/br&gt;"+
                                    "Email : &lt;span style='color:red'&gt;" + email +"&lt;/span&gt;&lt;/br&gt;"+
                                    "Gender: &lt;span style='color:red'&gt;" + gender +"&lt;/span&gt;";
                          });

                svgElem.call(tip);

                // add circles to svg
                var circle = svgElem.selectAll("circle")
                            .data(data)
                            .enter()
                            .append("circle")
                            .attr("cx", function(d) { return projection([ d["longitude"], d["latitude"] ])[0]; })
                            .attr("cy", function(d) { return projection([ d["longitude"], d["latitude"] ])[1]; })
                            .attr("r", "3px")
                            .attr("fill", "red");


                circle.on("mouseover", tip.show)
                .on("mouseout", tip.hide)
                .on("click", function(){userConnectors();});

                var lineTransition = function lineTransition(path) {
                            path.transition()
                                //NOTE: Change this number (in ms) to make lines draw faster or slower
                                .duration(5500)
                                .attrTween("stroke-dasharray", tweenDash)
                                .each("end", function(d,i) { 
                                    d3.select(this).call(transition); 
                                });
                        };

                var tweenDash = function tweenDash() {
                    var len = this.getTotalLength(),
                        interpolate = d3.interpolateString("0," + len, len + "," + len);

                    return function(t) { return interpolate(t); };
                };

                var links = [
                    {
                        type: "LineString",
                        coordinates: [
                            [ data[0].longitude, data[0].latitude ],
                            [ data[1].longitude, data[1].latitude ]
                        ]
                  }
                ];

                links = [];               
                 //update
                var userConnectors = function(){


                        for (var j = 0; j &lt; 5; j++) {
                            links.push({
                                type: "LineString",
                                coordinates: [
                                    [ projection(d3.select("circle").attr("cx")), projection(d3.select("circle").attr("cy")) ],
                                    //[ data[i].longitude, data[i].latitude ],
                                    [ data[j].longitude, data[j].latitude ]
                                ]
                            });
                        }

                    var pathArcs = arcGroup.selectAll(".arc")
                               .data(links)
                               .enter()
                               .append("path").attr({
                                    'class': 'arc'
                                })
                               .style({ 
                                    fill: 'none',
                                });

                    pathArcs.attr({
                        d: path
                    })
                    .style({
                        stroke: 'green',
                        'stroke-width': '2px'
                    })
                    // Uncomment this line to remove the transition
                    .call(lineTransition); 
                   // pathArcs.exit().remove();
                }
            });  
</code></pre>

<p>I want to draw the links for the clicked circle only , but my code does for all circles instead !</p>