How can I get this svg circle to appear above my d3 path and not below?

Question

I wrote a d3 graph plugin that draws a graph based on real time data given to it. When you mouseover the graph, there is a tooltip that follows your mouse, showing data at that point. Part of this tooltip is a circle that appears on the path at the closest point to the cursor. The problem is that no matter what I try, I cannot get this circle to appear above the path line like it's suposed to. I have tried using z-index, changing the append order of elements, and some other really wacky attempts. Nothing has had an affect (besides breaking everything.) Here's a pastebin of the code. The element in question has the class "focusCircle". Any help would be greatly appreciated.

Answer 1

Your circle gets rendered before the "resize" function is called. The "resize" function calls the "draw" function, where 2 paths get appended. I think those are the ones above your circle.