CODEWITHSUNDEEP
javascripthtmlsvgd3.js
Nikunj Aggarwal
Nikunj Aggarwal

Reputation: 397

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 code which which i wrote : code.

Now there are two problems with this code:

1) This code is working in FireFox but not in Chrome & IE 10?

2) How to configure the slider so that on one slide, only one tile will move into the view and only one will move out?

The number of tiles or rectangles are not fixed. There can be any number of tiles depending on the user.

Code:

var width = 4000,
height = 200,
margin = 2,
nRect = 20,
rectWidth = (width - (nRect - 1) * margin) / nRect,
svg = d3.select('#chart').append('svg')
    .attr('width', width);

var data = d3.range(nRect),
posScale = d3.scale.linear()
    .domain(d3.extent(data))
    .range([0, width - rectWidth]);
console.log(rectWidth)
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', posScale)
.attr('width', rectWidth)
.attr('height', height);

function redraw(x) 
{


    svg.transition()        
        .ease("linear")
        .attr("transform", "translate(" + -(x*rectWidth) + ")" );

        console.log(-(x*rectWidth));

}

var step = nRect/2;
new Dragdealer('magnifier',
{
    steps: step,
    snap: true,
    animationCallback: function(x, y)
    { console.log(x*10)
        redraw(x*step);

    }
});

i am trying to devise a way so that the value of steps will change according to the number of tiles.

Please help me.

Upvotes: 2

Views: 1419

Answers (2)

Chaoyu
Chaoyu

Reputation: 842

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

Upvotes: 0

Langdon
Langdon

Reputation: 20063

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:

Upvotes: 2

Related Questions