D3.js And Dragdealer Js

I am using dragdealer JS with D3.js. What i am doing is that when You drag the slider made by dragdealer JS the elements made by D3.js will move like a picture slider. Here is the

Solution 1:

You had a few problems that I've fixed here: http://jsfiddle.net/SqKZv/1/

1. In Chrome your svg element needed the height property set
2. In Chrome/IE, it doesn't appear that you can apply the transform attribute to your SVG element, I'm actually surprised this works in FireFox. I wrapped all of your rect elements in a g element and transformed that.

D3 does dragging very well by itself, so you don't need Dragdealer to do this. In addition to d3.behavior.drag, you can check out d3.svg.brush, specifically these examples of snapping to get what you want:

• Brush Snapping http://bl.ocks.org/mbostock/6232537
• Brush Snapping II http://bl.ocks.org/mbostock/6232620

Solution 2:

You may also want to try out the new D3 feature called brush: https://github.com/mbostock/d3/wiki/SVG-Controls

Here is an example I made using brush to implement a similar feature as you mentioned. https://github.com/CSE512-14W/a3-chaoyu-aniket