Wie man die Größe von D3 Knoten onclick ändert

Question

ich habe eine d3 api, in der ich eine Beziehung zwischen den Zahlen zeige ich benutze ein Servlet, um die Daten im json Format zu erhalten. Jetzt will ich das, wenn ich auf ein bestimmtes klicke Node seine Größe wird größer sein. Ich habe ein Beispiel dafür gesehen und ich habe auch versucht, dies in meine API zu bringen, aber es funktioniert nicht richtig. Ich poste sowohl meinen Code als auch den Link dieses Beispiels.

dies ist mein Code ..

<script> 


        var links = []; 
        var nodes = {}; 

        // Compute the distinct nodes from the links. 

        var width = 960, height = 500; 
        function loadNewData(){ 
         var svg = d3.select("#linkAnalysis").append("svg").attr("width", width).attr(
         "height", height); 

         // Per-type markers, as they don't inherit styles. 
         svg.append("defs").selectAll("marker").data(
         [ "suit", "licensing", "resolved" ]).enter().append("marker") 
         .attr("id", function(d) { 
          return d; 
         }).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY", 
          -1.5).attr("markerWidth", 6).attr("markerHeight", 6) 
         .attr("orient", "auto").append("path").attr("d", 
         "M0,-5L10,0L0,5"); 


         d3.json(
         "DirectedServlet", 
         function(error, directed) { 

          links=directed.links; 


          links.forEach(function(link) { 
           link.source = nodes[link.source] 
            || (nodes[link.source] = { 
            name : link.source 
           }); 
           link.target = nodes[link.target] 
            || (nodes[link.target] = { 
            name : link.target 
           }); 
          }); 

          var force = d3.layout.force().nodes(
          d3.values(nodes)).links(links).size(
          [ width, height ]).linkDistance(60).charge(
           -300).on("tick", tick).start(); 

          var path = svg.append("g").selectAll("path").data(
          force.links()).enter().append("path").attr(
          "class", function(d) { 
           return "link " + d.type; 
          }).attr("marker-end", function(d) { 
           return "url(#" + d.type + ")"; 
          }); 

          var circle = svg.append("g").selectAll("circle") 
          .data(force.nodes()).enter().append(
          "circle").attr("r", 6).call(d3.behavior.drag().origin(function(d) { 
           return d; 
          }).on("drag", function(d) { 
           d.x = d3.event.x, d.y = d3.event.y; 
           d3.select(this).attr("cx", d.x).attr("cy", d.y); 

           link.filter(function(l) { 
            return l.source === d; 
           }).attr("x1", d.x).attr("y1", d.y); 

           link.filter(function(l) { 
            return l.target === d; 
           }).attr("x2", d.x).attr("y2", d.y); 
          })); 
          circle.append("title").text(function(d){ 

           return d.name; 
          }); 


          var text = svg.append("g").selectAll("text").data(
          force.nodes()).enter().append("text").attr(
          "x", 8).attr("y", ".31em").text(
          function(d) { 
           return d.name; 
          }); 

          //selection is happening 
          var selected = circle.filter(function(d) { 
           return d.name; 
          }); 

          selected.each(function(d) { 
           // d contains the data for the node and this is the circle element 

           console.log(d.name); 
          }); 




          var circle = svg.append("g").selectAll("circle") 
          .data(force.nodes()).enter().append(
          "circle").attr("r", 6).on("click", 
          clickfn).call(force.drag().on("dragstart",dragstart)); 

          var clickfn = function(circle) { 
           alert(); 
          } 



          // Use elliptical arc path segments to doubly-encode directionality. 
          function tick() { 
           path.attr("d", linkArc); 
           circle.attr("transform", transform); 
           text.attr("transform", transform); 
          } 

          function linkArc(d) { 
           var dx = d.target.x - d.source.x, dy = d.target.y 
            - d.source.y, dr = Math.sqrt(dx * dx 
            + dy * dy); 
           return "M" + d.source.x + "," + d.source.y 
            + "A" + dr + "," + dr + " 0 0,1 " 
            + d.target.x + "," + d.target.y; 
          } 

          function transform(d) { 
           return "translate(" + d.x + "," + d.y + ")"; 
          } 


          function dragstart(d) { 
           d.fixed = true; 
           d3.select(this).classed("fixed", true); 
          } 
         }); 
        } 

       </script> 

dieses ist die Verbindung, die Funktionalität i

in meinem api hinzufügen möchten

http://bl.ocks.org/d3noob/5141528

bitte jemand helfen ...

Answer 1

Sie Sie müssen dazu einen click Event-Handler an Ihre Kreise anhängen:

circle.on("click", function() { 
    d3.select(this).attr("r", 12); 
}); 

Sie können natürlich den neuen Radius anpassen oder aus Daten an den Kreis gebunden bekommen.