lucifer lucifer - 3 months ago 21
Javascript Question

How to change the size of D3 nodes onclick

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

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.