d3 pie chart with link in tooltip - d3.js

I have a d3 pie chart that displays a tooltip on hover. I need to have a link in the tooltip box, but the box disappears once the cursor leaves the pie chart. How can i modify the mouseover/mouseout function to stay open when the cursor is inside?
.on('mouseover', function (d) {
$("#tooltip")
.html(d.data.label)
.stop(true).fadeTo(800, 1);
})
.on('mouseout', function (d) {
$("#tooltip").fadeOut(900, 0);
});
here is my fiddle


That's tricky. Normally, you just set pointer-events:none; on the tooltip in CSS, so that it doesn't block the mouse events from getting to the element below. But if you do that, then your link won't work!
I'm assuming that your eventual intention is to have the tooltip display over top of or immediately adjacent to the pie chart. If so, this answer is relevant for getting your positioning right.
One option would be to the add mouseover/mouseout functions to the tooltip as well, so that a mouseover on the tooltip triggers it's own visibility, and mouseout starts the transitions for it to fade away -- but only if that mouse doesn't immediately trigger a mouseover fading it back in again!
I'm not an expert on JQuery, but if their transitions work the same as D3 transitions, then the "fade in" transition as you move from SVG to tooltip should cancel out the just-started "fade out" transition so the user doesn't notice. Just make sure the transition or delay on the fade out is reasonably long for the user to move from one element to the other.
If you want the pop-up to be in the corner, I don't see how you can do that and also have it fade out after the mouse moves off the pie chart. Not without driving your users crazy, anyway.

Related

Recharts keep tooltip on screen

The task is to keep the tooltip visible on screen upon clicking on chart dot like this
Right now my tooltips disappear when moving mouse, is there any way to achieve this?

How can I add an onmouseover event to a line?

Using c3.js, I have a line graph with many lines. The tooltip properly appears at individual data points, and I can use the mouseover property to fire on data point hover.
I need to change the color of a line on the graph on mouseover at any position of the line. It appears as though lines are obscured from hover events by other shapes as I can't even get pain JS or CSS to fire events. Is there any way to get c3.js to fire an event when the mouse moves over and out of a line?

It's a default js function method calling:
onmouseover: function () { ... }

D3 forcelayout label overlap with link

I would like to display tooltip when hover a link
But sometimes the text of label of node got in the way--> no longer the mouse focus in hovering link.
Is there any way to completely ignore the label and let the link hovering happens as expected? Just like the label is not there (still display) anymore

Can not capture mouseover event while dragging on an svg

What I need is to highlight one circle when Im dragging an arrow over it.
While dragging this are the color of the circles:
circles now
What I need is stg like this:
Target Node highlighted
I tried with d3js mouseover event on the circle, but is not being fired while dragging, and also tried with css rule ( :hover) over the circle with the same results.
Any ideas?
Thanks

Check this out:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events
If you set the pointer-events parameter of your element you drag to none, then the other elements you hover onto, will trigger the mouseover event.
And when you finish the drag, set the parameter to auto.

Mouse events stop working after d3 graph, zoom loads

On my page, I have some events defined using Spine's controller events. They are assigned to selectors using jQuery's delegate, and they work fine:
events:
'click #zoom a': 'zoom'
'mouseenter #zoom a': -> $("#yZoom_help").show()
'mouseleave #zoom a': -> $("#yZoom_help").delay(1600).fadeOut 1600
Asynchronously at some point later in time, I set up some things with d3. Specifically, I am setting up zoom behavior on a canvas, a bunch of axes, etc.
#x_scale = d3.scale.linear()
.domain([#lcData.start, #lcData.end])
.range([0, #width])
#y_scale = d3.scale.linear()
.domain([#lcData.ymin, #lcData.ymax])
.range([#h_graph, 0])
#zoom_graph = d3.behavior.zoom()
.x(#x_scale)
.scaleExtent([1, #max_zoom])
.on("zoom", #graph_zoom)
#canvas = d3.select("#graph_canvas")
.attr("width", #width)
.attr("height", #h_graph)
.call(#zoom_graph)
.node().getContext("2d")
# ... some other things left out
The problem is that after I go through this d3 setup stuff, the mouse events on the non-d3 elements stop working. They just don't work at all. The elements have the highest z-index and are not obscured by any canvas or svg elements, but they stop detecting any mouse events.
d3 should only be activating mouse events on the canvas, right? Is there some d3 magic going on that is taking over the mouse on the entire page? For example, d3 inserts this div in the body:
EDIT: If you want to see what I mean, go to this link:
http://korhal.andrewmao.net:9294/#/sources/APH10154043
There is a little icon in the top left that changes color when you hover. This is the one with the mouse events; it is supposed to display a message. Once the page loads, it stops working. If you want to see it work, just reload the page and disable the JSONP call in your debugger, which prevents the function that sets up d3 from executing.

What happened here actually had nothing to do with d3. It seems that I was inadvertently calling #render twice during the loading of my Spine app, making all the elements get unbound from their events, when a view was appended.
Rebinding could be done with a call to #delegateEvents(#events) followed by #refreshElements, but in this case it was simply better to fix the superfluous #render call.
Related question with backbone: Why Backbone events on replacing html does not work?

Resources