christophergandrud/d3Network

ensure node labels are not obstructed by other nodes

maxcw opened this issue · 4 comments

maxcw commented

I have a dense network, and when my mouse hovers over nodes, the label is sometimes obstructed by other nodes. I would love it if the text was 'on top of' all nodes.

I tried my hand at this myself in the code below. The weird thing is that the stand-alone version of the code works fine when opened as an html file. But when I give it to shiny using cat() and htmlOutput(), the next labels appear at the bottom of the screen.

<style> .link { stroke: #666; opacity: 1; stroke-width: 1.5px; } .node circle { stroke: #fff; opacity: 1; stroke-width: 1.5px; } .node:not(:hover) .nodetext { display: none; } text { font: 7px serif; opacity: 1; pointer-events: none; } </style> <script src=http://d3js.org/d3.v3.min.js></script> <script> var nodes = [ { "name" : "Bart ", "group" : 5 }, { "name" : "Lisa ", "group" : 4 }, { "name" : "Marge ", "group" : 9 }, { "name" : "Homer ", "group" : 1 }, { "name" : "Smithers ", "group" : 5 }, { "name" : "Maggie ", "group" : 5 }]; var links = [ { "source" : 0, "target" : 4, "value" : 1 }]; var width = 800 height = 800; var color = d3.scale.category20(); var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(50) .charge(-120) .on("tick", tick) .start(); var svg = d3.select("#networkPlot").append("svg") .attr("width", width) .attr("height", height); var link = svg.selectAll(".link") .data(force.links()) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); //added tooltip var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("color", "black") .style("background-color", "#FEFCFF") .style("border", "solid 1 #726E6D") .style("visibility", "hidden"); //updated mouseover and mouseout, added mousemove var node = svg.selectAll(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node") .style("fill", function(d) { return color(d.group); }) .style("opacity", 1) .on("mouseover", function(d) { tooltip.html(d.name) .style("visibility", "visible") .attr("cursor", "hand"); }) .on("mousemove", function(){ tooltip.style("top", (d3.event.pageY - 10)+"px") .style("left",(d3.event.pageX + 10)+"px"); }) .on("mouseout", function(){ tooltip.style("visibility", "hidden"); }) .call(force.drag); node.append("circle") .attr("r", 6) function tick() { 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; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); } </script>
christophergandrud commented

Can you send the code as a gist. It hasn't been rendered very well in the issue.

maxcw commented

Hi Christopher,

The code is located at:

https://gist.github.com/maxcw/7fb0b8dbaa10efb79d41

I've never used a gist before, so let me know if that doesn't work. Just to reiterate, this is a sample of what I plug into shiny:

In server.R I have:

output$networkPlot <- {

    conn=file('d3network_mod.html',open='r')
    cat(readLines(conn),sep='\n')
    close(conn)

}

and in the ui.R I have:

htmlOutput('networkPlot')

The free-standing version of the html file looks fine in when opened directly by browsers. But when d3network_mod.html is plugged into Shiny, the node labels show up at the bottom left corner!

Thank You For Your Help,

Max

Max Watson, PhD
L-3 Data Tactics
7901 Jones Branch Dr., Suite 700
McLean, VA 22102
Cell: (760) 274-4693
Office: (571) 482-7109
www.Data-Tactics.comhttp://www.data-tactics.com/

From: Christopher Gandrud [notifications@github.com]
Sent: Tuesday, July 22, 2014 2:23 AM
To: christophergandrud/d3Network
Cc: Max Watson
Subject: Re: [d3Network] ensure node labels are not obstructed by other nodes (#20)

Can you send the code as a gisthttps://gist.github.com/. It hasn't been rendered very well in the issue.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/20#issuecomment-49702495.

christophergandrud commented

The gist looks good. Thanks!

I'll try to carve out a bit of time to look at this within the week.

On Tue, Jul 22, 2014 at 3:08 PM, maxcw notifications@github.com wrote:

Hi Christopher,

The code is located at:

https://gist.github.com/maxcw/7fb0b8dbaa10efb79d41

I've never used a gist before, so let me know if that doesn't work. Just
to reiterate, this is a sample of what I plug into shiny:

In server.R I have:

output$networkPlot <- {

conn=file('d3network_mod.html',open='r')
cat(readLines(conn),sep='\n')
close(conn)
}

and in the ui.R I have:

htmlOutput('networkPlot')

The free-standing version of the html file looks fine in when opened
directly by browsers. But when d3network_mod.html is plugged into Shiny,
the node labels show up at the bottom left corner!

Thank You For Your Help,

Max

Max Watson, PhD
L-3 Data Tactics
7901 Jones Branch Dr., Suite 700
McLean, VA 22102
Cell: (760) 274-4693
Office: (571) 482-7109
www.Data-Tactics.comhttp://www.data-tactics.com/

From: Christopher Gandrud [notifications@github.com]
Sent: Tuesday, July 22, 2014 2:23 AM
To: christophergandrud/d3Network
Cc: Max Watson
Subject: Re: [d3Network] ensure node labels are not obstructed by other
nodes (#20)

Can you send the code as a gisthttps://gist.github.com/. It hasn't been
rendered very well in the issue.

—
Reply to this email directly or view it on GitHub<
https://github.com/christophergandrud/d3Network/issues/20#issuecomment-49702495>.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

maxcw commented

Thank you for looking at my code!

Max Watson, PhD
L-3 Data Tactics
7901 Jones Branch Dr., Suite 700
McLean, VA 22102
Cell: (760) 274-4693
Office: (571) 482-7109
www.Data-Tactics.comhttp://www.data-tactics.com/

From: Christopher Gandrud [notifications@github.com]
Sent: Tuesday, July 22, 2014 10:27 AM
To: christophergandrud/d3Network
Cc: Max Watson
Subject: Re: [d3Network] ensure node labels are not obstructed by other nodes (#20)

The gist looks good. Thanks!

I'll try to carve out a bit of time to look at this within the week.

On Tue, Jul 22, 2014 at 3:08 PM, maxcw notifications@github.com wrote:

Hi Christopher,

The code is located at:

https://gist.github.com/maxcw/7fb0b8dbaa10efb79d41

I've never used a gist before, so let me know if that doesn't work. Just
to reiterate, this is a sample of what I plug into shiny:

In server.R I have:

output$networkPlot <- {

conn=file('d3network_mod.html',open='r')
cat(readLines(conn),sep='\n')
close(conn)
}

and in the ui.R I have:

htmlOutput('networkPlot')

The free-standing version of the html file looks fine in when opened
directly by browsers. But when d3network_mod.html is plugged into Shiny,
the node labels show up at the bottom left corner!

Thank You For Your Help,

Max

Max Watson, PhD
L-3 Data Tactics
7901 Jones Branch Dr., Suite 700
McLean, VA 22102
Cell: (760) 274-4693
Office: (571) 482-7109
www.Data-Tactics.comhttp://www.data-tactics.com/

From: Christopher Gandrud [notifications@github.com]
Sent: Tuesday, July 22, 2014 2:23 AM
To: christophergandrud/d3Network
Cc: Max Watson
Subject: Re: [d3Network] ensure node labels are not obstructed by other
nodes (#20)

Can you send the code as a gisthttps://gist.github.com/. It hasn't been
rendered very well in the issue.

—
Reply to this email directly or view it on GitHub<
https://github.com/christophergandrud/d3Network/issues/20#issuecomment-49702495>.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/20#issuecomment-49746225.