Wie Punktverbindungsstücke auf Karte in d3.js auswählen?

Question

Ich baue eine Karte Benutzer Verbindung mit d3.js, ich möchte zufällig Links aus dem Kreis eines Benutzers beim Klicken auf 5 andere zu zeichnen, aber ich kann nicht bestimmen, wie zu erkennen/zu fühlen, auf den Klick für bestimmte Punkt/Kreis.

hier angebracht ich mein Skript:

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 "<strong><center>Personal info </center></strong>"+ 
            "Name : <span style='color:red'>" + name +"</span></br>"+ 
            "Email : <span style='color:red'>" + email +"</span></br>"+ 
            "Gender: <span style='color:red'>" + gender +"</span>"; 
          }); 

       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 < 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(); 
       } 
      }); 

Ich möchte nur die Links für den angeklickt Kreis zeichnen, aber mein Code macht für alle Kreise statt!

Answer 1

Statt mit

.on("click", function(){userConnectors();}); 

Versuchen

.on("click", function(d){userConnectors(d);}); 

Und innerhalb der Methode:

var userConnectors = function(d){ 

... 

coordinates: [ 
       [ d.longitude, d.latitude ], //as OP said 
       [ data[j].longitude, data[j].latitude ] 
       ]