CODEWITHSUNDEEP
javascriptd3.jsonmouseoverforce-layout
nocodaoh.2013
nocodaoh.2013

Reputation: 171

Displaying text over a node in a d3 force-layout graph

I am creating a force-layout graph using d3 and I am trying to make the name of a specific node appear when I mouse over that node. I know how to add the text before any mouse over effect and thought that I could just move that part of the code into the mouseover function but that did not work. I will also need to make the text disappear when I move the mouse off of the node. Here is the mouseover function where I attempt to add the name to the node:

function mouseover() {
    d3.select(this).transition()
         .duration(750)
         .attr("r", function(d) {return d.size + 10;});
    var labels = gnodes.append("text")
         .text(function(d) { return d.name;})
         console.log(labels);
                    }

Here is a link to a fiddle of the complete code as well:

http://jsfiddle.net/ohiobucks23/QvVU6/

Upvotes: 0

Views: 1059

Answers (1)

FernOfTheAndes
FernOfTheAndes

Reputation: 5015

If not using a tooltip per good recommendation by Bhatt, you will need to:

1) declare gnodes outside the drawGraph() function so that it is visible to the mouse functions, and

2) make the following changes to the mouse functions: 

function mouseover(d) {
   d3.select(this).transition()
       .duration(750)
       .attr("r", function (d) {return d.size + 10;});

   // locate node and append text; add class to facilitate subsequent deletion
   gnodes.filter(function (o) {return o.index === d.index;})
       .append("text")
       .attr("class", "nodetext")
       .text(d.name);
}

function mouseout(d) {
   d3.select(this).transition()
       .duration(750)
       .attr("r", function (d) {return d.size;});

   // delete text based on class
   d3.selectAll(".nodetext").remove();
}

Here is the complete FIDDLE. I changed the text of the root node element so that you can see that the mouseover function is really acting on the selected node.

Upvotes: 2

Related Questions