title: How to change the size of D3 nodes onclick
body: <p>i have a d3 api in which i am showing a relationship between the numbers i am using a servlet to get the data in json format.Now i want that when i click on a certain node its size will be bigger.I have seen an example of this and i also tried to put this in my api but its not working properly.i am posting both my code and the link of that example.</p>
  
  <p>this is my code..</p>
  
  <pre><code>&lt;script&gt;
  
  
                      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);
                              }
                          });
                      }   
  
                  &lt;/script&gt;
  </code></pre>
  
  <p>this is the link which functionality i want to add in my api</p>
  
  <p><a href="http://bl.ocks.org/d3noob/5141528" rel="noreferrer">http://bl.ocks.org/d3noob/5141528</a></p>
  
  <p>somebody please help...</p>