Develop Reference

d3 v4 - drag 'clickDistance' doesn't seem to have any effect

I have a d3 element 'itemGroup' which has other elements within it. One of these is a text label that I'd like to subscribe to the click events of.
Additionally, I'd like the itemGroup to be draggable. Without the code below the click events fire as expected. With the below code I get the drag behaviour I want, but the click event on the child element of itemGroup no longer fires.
d3.selectAll(".itemGroup").call(d3.drag().clickDistance(4).on("start", started));
I thought that 'clickDistance' was meant to address this but setting any large or small value doesn't seem to have any effect. I expected a value of '4' to mean that the drag behaviour wouldn't kick in until 4 or more distance units have been travelled by the mouse (in the mousedown state), but I see the drag behaviour start immediately.
Tried with 4, 40, 4000.... nothing changes the behaviour. I'm on the latest and greatest version to date.
Any ideas?

OnDragEnd don't go back to starting position

I'm using the draggable='true' attribute to make a draggable element in my website, but I've run into a cosmetic issue.
The dragging is basically done to reorder elements, so I want to pick them up, drag them into their new position, and then simply release them into the new position, but as soon as I let go, the element will slide back to it's original position before moving to the new position.
See this image:
How can I keep this from happening? I want to skip the "goes back" part.
$("div").on('dragend', function(e){
e.preventDefault();
e.stopPropagation();
$("div.slide.placeholder").replaceWith($(this));
updateSlides();
})
Edit:
This issue has been confirmed as localized to Mac. It is very similar to the whole window-bounce effect.

I tried coding what you want using jquery.
-->http://jsfiddle.net/oLc2f3kp
the element that has class .drag_item can be draged. if you release it anywhere that isn't on the area of element that has class .release_area, it will go back to the position before.
I hope it's what you want. if you have any question about this code,ask me then :D
UPDATED I tried over many times now I have the solution
$('div[class=dragable]').on('dragend',function(e){
$(this).css('top',e.originalEvent.pageY-($(this).height()/2));
$(this).css('left',e.originalEvent.pageX-($(this).width()/2));
});
I can't get the position while I'm draging it (the position I got is the original position of the element before start dragging") so the only way( so far I have tested now) is to get the position of your mouse when you drop it and set left and top are same as the position of your mouse.
I have only tested in Chrome. anyways I don't suggest you to do this.

any option to reduce the mouse hover area

i am working on d3. and the problem which i am facing is that whenever i take the mouse pointer inside the graph it immediately shows the hover details. but the thing is that i am in need of showing the hover details only if the mouse pointer is exactly over the datapoint or a graph point. the graph which i am working is http://code.shutterstock.com/rickshaw/examples/lines.html. any help would be appreciated to reduce the size of the mouse hover area.

Stop event from bubbling up by using stopPropagation method on the JavaScript/jQuery event object.
If you're using jQuery, this can be done like:
jQuery('#element').on('click', function(e) {
e.stopPropagation();
// do something here
});
For JavaScript, you can see an example here.

jQuery Events get skipped

I built a slideshow-menu (using Slide JS - http://www.slidesjs.com/ ) and added a hover-event, so images will already switch when moving the mouse over the menu point. Additionally, when moving out of the whole block, there's a mouseleave event, which sets the image and menu point back to the first one.
Now when I quickly switch between menu points (hover event) and then leave the whole block (mouseleave), it usually skips the mouseleave event (- or it never reaches it because the hover events (including a fade effect) take up too long).
Is there a way to thoroughly work off each event (or at least the last one in a row - e.g. mouseleave or last hover)?
Maybe an image of the website layout helps?
Red: Hover-Event (changes green content)
Blue: Mouseleave-Event (green goes back to default)

If the fade effect is the culprit, then try adding a stop(true, true) function before your fade effect.
$(slideshow-menu-selector).on('mouseleave', function(){
// Reset code here
$(element-selector).stop(true, true).fadeOut();
})
This is just a sample code, based on your question. If you can put up a Fiddle, it would help a lot!

How do I force the mouse cursor to change without a mouse movement in Javascript?

In my webpage, testing on Chrome, I have a button div. The button is styled so that it has a hover state in a different colour, and a hand-shaped mouse pointer. All this is fine.
When the button is pressed, it triggers an animation, and I don't want to let the user press the button again until it's done, so I put a semi-opaque div over the top to block the button.
The problem comes when the animation completes and the div is removed. The mouse pointer is over the button but the hover state isn't active until the user actually moves the mouse, then the mouse pointer changes and all is well.
Note that the click still works - this is a purely cosmetic (but annoying) aberration.
Can I force the browser to re-evaluate the point under the cursor?

The correct way to prevent input to a button is to disable it. You can toggle the cursor style with the CSS cursor property.
Javascript:
var theButton = document.getElementById('theButton');
theButton.disabled = true;
theButton.setAttribute('style','cursor:default;');
// animation is complete
theButton.disabled = false;
theButton.removeAttribute('style');
jQuery:
var $theButton = $('#theButton').prop('disabled',true).css('cursor','default');
// animation is complete
$theButton.prop('disabled',false).css('cursor','pointer');

Check the position of the mouse when the animation ends and you remove the div, or just always store them and check that value when it ends to see if the cursor is still over your button. You could do this with event.clientX, event.clientY or event.pageX, event.pageY something similar to those(not completely sure just did some quick research but those seemed to work in chrome,IE, and firefox). Then if the mouse is still over the button, trigger the on.hover for the button element again.

Try to set the curser of all elements using the * wildcard in jquery. See if this will update the cursor.

It seems like the root of your question was to how to prevent double animating. Instead of placing a <div> over it, you can just do it with JavaScript.
Set a global variable called isAnimating to true when you start your animation. At the top of your click handler add this line if (isAnimating) return false; Obviously, you need to set isAnimating to false as soon as the animation is completed, either through a timer or in some kind of callback function.
This will prevent double animating, without doing anything silly with the DOM that would affect the hover states, or so I'd hope!
Let me know if that's not what you meant and I'll take another look at it!