Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
KobaKhit opened this issue Nov 17, 2014 · 1 comment
Open

Comments

@KobaKhit
Copy link

Another feature that would be helpful.

@KobaKhit
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant