I have a multiline chart using D3, and the lines have nodes to mark the points. I also have legends below x-axis to display or hide each line when a user clicks on them. Similar to this example
The chart and legend selection works totally fine when I click normally on legends. But when I click rapidly on legends, one of the lines' nodes disappear. When I inspected the page, I found they got relocated to the top of the browser window(and not visible because there's no svg element there)
I don't even know what the problem is and where should I start debugging as it works fine with normal speed mouse clicks on legends.
I know it is very difficult for anyone to help without looking at the source code or a working fiddle, but I just wanted to know (before I try to reproduce the problem on fiddle) has anyone experienced something like this before? does mouse clicking speed affect how elements get rendered in D3? or this is not a D3 problem at all and some javascript/dom thing I am overlooking?
Some "strange" behaviour can occur depending on how your transitions are set up. For example, if there are many transitions attached to the same element, one might be interrupted when another one starts, and that may result on some element not being redrawn on screen.
For more about this see D3 documentation: Working with transitions, specifically this section which explains that "for a given element, transitions are exclusive: only one transition can be running on the element at the same time. Starting a new transition on the element stops any transition that is already running."
Related
I copied an force directed graph example from here: https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8
I deleted the labels, modified nodes and links and changed the styles.
the most important change is, that the view area of the svg should be the complete window.
but now somehow the nodes are jumping around ugly when they are dragged. I don't know where it comes from. what in my d3/JS-codes went wrong, that it's not going smooth anymore, like in all the great examples with the force directed graph? best case would be if the node stays with the mouse position, but I'll be very happy if at least this jumping would stop because it's bad UX.
here is my code: https://jsfiddle.net/nczekbqh/7
could'nt find an answer anywhere but the need to fix the first coordinates of the nodes. I can't do this, because my result work needs at least 100 nodes in it.
I tried a bit with .force() and .drag() but nothing changes this obvious twitching.
The flicker happens in the original Block's snippet as well. The bug is related to how the differential is added to the translation. You can note that if you drag a point for a long time in the original snippet.
I have created a 5 nodes, 0 links force directed graph here: https://observablehq.com/#adelriosantiago/no-flicker-point-dragging. It uses the full window height and width and the flickering is gone.
I have an angular directive wrapped around a D3 graph. I have created a tooltip and i handle the visibility in 'mouseover' and 'mouseout' of the parent element, i also handle the tooltip position in 'mousemove' so that it moves with the mouse.
The tooltip is absolute.
The issue is, when i move my mouse pointer fast enough, the mouseout event of the parent gets called , even though the mouse pointer is still within the specified area. I logged and found out , it is happening because sometimes the mouse pointer (when moving fast, the tooltip position hasn't updated so quick) hovers over the tooltip , which is absolutely positioned and not part of the parent.
This creates some difficulties as on mouseout of the parent element i am also changing the visibility of another element, so it gives a fluctuating/flicker kind of effect on fast mouse move.
I am not sure whether this is the expected behavior or if it is specific to D3 or angular.
Here is a fiddle:
http://jsfiddle.net/6bQA8/5/
initially the text and polylines are shown, they would hide when hovered over any of the pie slices.
on hover over any of the pie slices, you will get a tooltip, if you move your mouse, the tooltip also moves, if you move your mouse fast enough, check the console and you will see "tooltip hovered" ,also on the UI you would see the flickering text and polylines which should be visible on mouseout from the slices.
In ideal case, "tooltip hovered" should never be called as the tooltip always updates with the mouse and it is not below the pointer.
P.S: one way to solve the problem is to add pointer-events:none to the tooltip or to increase the offset of tooltip from the pointer, but i am more interested in knowing why this happens and if this is a limitation of the framework or the browser or something wrong in the code. Also, since i am re-using the same tooltip object later for clicking purpose, so at that time i would have to remove the pointer-events:none, and increasing the offset does not look really good in the UI. Also, both these methods are actually hacks and not probably the correct solution.
Since you are asking a solution apart from the pointer-events:none i have done it this way:
slices.on("mouseout", function(d) {
//return if the mouse out is triggered by the tooltip-menu
if(d3.select(d3.event.toElement).classed("tooltip_menu")){
return;//if the to element is tooltip_menu
}
working fiddle here
Javascript can not block mouse until it does all calculations and DOM manipulations, that's why, there is dealy in moving the tooltip.
In modern browsers operations happens at least with 4ms delay, as setTimeout/setInterval minimum delay is 4ms.
In the project I'm currently working on, I have a Voronoi diagram in the background, and I need a white circle with a single line of text in the upper-right-hand corner.
The circle needs to be clickable. Everything was going great, I have my voronoi cells reacting to clicks and styles as I wanted, including css3 transitions, when I realized that a simple :hover over my circle was not doing anything.
I tried messing the jquery .on("click",...) function to see if I could figure out what was up, but I still got nothing. The voronoi cells behind the circle were receiving the :hover, and the circle wasn't blocking it.
I then tried writing the svg by hand, to see if I just had some weird problem with my javascript. Lo-and-behold, nothing changed. I could get text and rects and paths to receive the :hover, but not the circle.
I am totally baffled by this. Here is a jsFiddle which demonstrates my problem. I hope I'm just making a silly mistake.
At first I thought perhaps D3 was the issue (somehow), but after removing it, the code still doesn't run.
I want to animate an SVG path to 2 different states. For this, I've created a triangle path, with 2 example animations, which I trigger through Javascript.
These animations only have the "to" attribute because the intention is to animate the path from whatever state is in to any other desired state (the final animation will have 10+ states).
You can see a working example here: http://codepen.io/anon/pen/dxvlt
The problem is that, at least in Chrome, if you click Animation1, then Animation2, then back to Animation1 it works fine. However, right after that, animations stop working, or only one of them works. I believe the animation is triggered, but it's not being drawn. This problem does not happen in Firefox, and I've read that Webkit and Blink have numerous SVG bugs.
Do you know a workaround to make it draw correctly on Chrome as well?
Having a problem getting my javascript working properly . For a single tooltip, it works great. But when I rollover multiple tips, I get a flickering effect. It seems the mouseover, out events are being 'queued' or something.
I've created a fiddle where you can see what I'm talking about
http://jsfiddle.net/eco_bach/dpFBQ/2/
Any other optimization suggestions appreciated!
You just need to add .stop(true, true) before the fadeIn() or fadeOut() methods to end any current animation. This will stop it flickering as seen here
Your code is creating and animating the tool tip every time you mouse over an element, so the flickering is expecting. I suspect you want to open it once and then just update its location and content when hovering others.
In that case you will need to track wether the tooltip is already open or not, if it is update its content and location but skip animating it. If not, do do the animation.