How to display a text when mouseover a node in D3 force layout
css, d3.js, force-layout, javascript, jquery
Solution
This should help:
.on("mouseover", function(d)
{
d3.select(labels[0][d.index]).style("visibility","visible")
})
.on("mouseout", function(d)
{
d3.select(labels[0][d.index]).style("visibility","hidden")
})
Problem
I am trying to display the text when I move the mouse over a node in Force-Directed Graph in `D3.js`. My problem is that when I move the mouse over any node, all the texts of these nodes are displayed. Here is my code: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .node { stroke: #fff; stroke-width: 1.5px; } .nodeDetail { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } node .text { font: 12px sans-serif; pointer-events: none; } </style> </head> <body> <script src="http://d3js.org/d3.v3.js"></script> <script src="d3/d3.v3.min.js charset=UTF-8"></script> <script> var graph = { "nodes":[ {"name":"Myriel","group":1}, {"name":"Napoleon","group":1}, {"name":"Mlle.Baptistine","group":1}, {"name":"Mme.Magloire","group":1}, {"name":"CountessdeLo","group":1} ], "links":[ {"source":1,"target":0,"value":1}, {"source":2,"target":0,"value":8}, {"source":3,"target":0,"value":10}, {"source":3,"target":2,"value":6}, {"source":4,"target":0,"value":1} ] }; var width = 960, height = 500; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-120) .linkDistance(30) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var drawGraph = function(graph) { force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var gnodes = svg.selectAll('g.gnode')//('g.gnode') .data(graph.nodes) .enter() .append('g') .classed('gnode', true); var node = gnodes.append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .on("mouseover", function(d) { d3.select(this).transition() .duration(750) .attr("r", 15); return labels.style("visibility", "visible"); }) .on("mouseout", function() { d3.select(this).transition() .duration(750) .attr("r", 5); return labels.style("visibility", "hidden");//}) }) .call(force.drag); var labels = gnodes.append("text") .text(function(d) { return d.name; }) .style("visibility", "hidden"); /*gnodes.append("text") .text(function(d) { return d.name; }) .style("visibility", "hidden");*/ force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); gnodes.attr("transform", function(d) { return 'translate(' + [d.x, d.y] + ')'; }); }); }; drawGraph(graph); </script> </body> </html> ``` I tried to do the following codes but it did not work neither: ``` .on("mouseover", function(d) { d3.select(this).transition() .duration(750) .attr("r", 15); d3.select(this).append(text) .style("visibility", "visible"); }) ``` How can I display the text that is related to a particular node when I move the mouse over that node? Could anyone please help me solve this problem. Thank you in advance.