How to change the size of D3 nodes onclick

Question

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.

this is my 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>

this is the link which functionality i want to add in my api

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

somebody please help...

Answer 1

You need to attach a click event handler to your circles to do this:

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

You can obviously adjust the new radius or get it from data bound to the circle.

Answer 2

For those who are still wondering how to make the previous node go back to its regular size once you click on a new one, here's a simple solution:

var toRemove;

.on('click', function() {
                if(toRemove){
                    d3.select(toRemove).attr("r", 6);
                }
                toRemove = this;
                d3.select(this).attr("r", 12);
            });

Simply store the previous element to the variable toRemove, and then once you click on a new circle, set the radius of the previous element back to its original size.