How to avoid overlapped labels on a Scatterplot graph

[sspboyd]

Here's the link to a demo version of my problem: http://jsfiddle.net/sspboyd/pe6xW/9/

Right now I have a scatterplot graph and I'm displaying text labels for nodes on mouseover. The problem I'm having is that the text labels are being obscured by other nodes being drawn overtop. 

How can I setup the rendering of the chart so that the nodes are drawn first, and then afterwards the text labels are drawn for nodes that are being moused over?

Thanks,

Stephen

[Jamie Popkin]

Hey Stephen.

Have you considered rendering the text in a separate group element <g> that is on top of the nodes?

Jamie

--

Jamie Popkin
Little Earth

@jamiepopkin

http://littleearth.ca

[Ian Johnson]

you can move the highlighted node to the front:

http://enjalot.com/tributary/3651456/

i also made a short video illustrating the concept

https://vimeo.com/49741437

--
Ian Johnson

http://enja.org

[Jamie Popkin]

I don't mean to hijack this thread..... But.....

Ian - That site is so awesome I almost had a heart attack! Did you take part in creating enjalot?

--

Jamie Popkin
Little Earth

@jamiepopkin

http://littleearth.ca

[Ian Johnson]

thanks Jamie :) yeah i've been working on the project called tributary with some friends. will be moving it to tributary.io soon (enjalot is my personal nickname)

i also made some more videoshttp://enjalot.github.com/dot-enter/ where i use the site to make d3 tutorials

[Jamie Popkin]

Fantastic project Ian. It will be great for people learning d3. Thanks for sharing. 

[sspboyd]

Thanks very much Ian. I've never received a custom screencast explaining a help request! Much appreciated.

And I with Jamie, that is a very cool site for demoing.

[Krishna Moorthy]

Hi Ian,

    i am working on rickshaw scatter plot graph.  is there any option for displaying the label above the scatter bubble in on load event. if yes . please let me know..