christophergandrud / d3Network

Tools for creating D3 JavaScript network graphs from R.
http://christophergandrud.github.io/d3Network/
171 stars 56 forks source link

Show the names of the nodes only on hover like in d3ForceNetwork #26

Open KobaKhit opened 9 years ago

KobaKhit commented 9 years ago

Another feature that would be helpful.

KobaKhit commented 9 years ago

EDIT: Tested the code below and it works.

d3SimpleNetwork(data.frame(network), width = 600, height = 350, hover=TRUE)

This code will produce a graph that shows names of the nodes only on hover. I can submit a pull request. End edit

A quick way I would do it:

templates.R:

  1. Add {{hover_style}} to BasicStyleSheet
  2. Add nodetext class by modifiying the node.append("text") to the following in the BasicForceJS
node.append("svg:text")
.attr("class", "nodetext")
.attr("x", 12)
.attr("dy", ".35em")
.style("fill", "#3182bd")
.text(function(d) { return d.name; });

3.Add {{hover_mouse_over}} inside the mouseover function in BasicForceJs like so:

function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);

{{hover_mouse_over}}
}

d3SimpleNetwork.R: Add a logical argument hover to the function d3SimpleNetwork and add the following after clickTextSize:

# Create click text size
clickTextSize <- fontsize * 2.5

# Initialize hover option
hover_style<-""
hover_mouse_over<-""

if(isTRUE(hover)){
  hover_style<-"
    .node:not(:hover) .nodetext {
      display: none;
    }"
  hover_mouse_over<-paste("
        d3.select(this).select('text').transition()
        .duration(750)
        .attr('x', 13)
        .style('stroke-width', '.5px')
        .style('font', '",clickTextSize,"px serif')
        .style('opacity', 1);",sep="")
    }

Should work. I did not test it cause dont know how. When I edited the html code myself to include the hover_style and hover_mouse_over I got the desired behavior. However, it would be more convinient to have this as an option in the d3SimpleNetwork function rather than editing the html myself.