How to zoom in/out d3.time.scale without scaling other shapes bound to timeline

Question

http://jsfiddle.net/HF57g/ is an example of a single event(blue rect) placed on the timeline. If i zoom into the timeline, rect's placement on the x axis changes in harmony with the ticks on axis. but at the same time, rect is scaled horizontally.

if i modify the following section of the code

svg.selectAll(".item").attr("transform", "translate(" + d3.event.translate[0]+", 0)scale(" + d3.event.scale+", 1)");

to

svg.selectAll(".item").attr("transform", "translate(" + d3.event.translate[0]+", 0)scale(1, 1)");

as in http://jsfiddle.net/HF57g/1/ to disable horizontal scaling, then the rect's position changes much more than the axis' during zoom in/out.

How can i zoom in/out time.scale without scaling other related shapes?

could you perhaps accept your answer (by pressing checkmark beside it? — VividD, Jan 17 '14 at 18:47

score 6 · Accepted Answer · answered Mar 22 '13 at 14:26

6

I ended up adding an update function to rearrange the rects' places depending on the new positions returned by scale(x).

function update_events(){
    return svg.selectAll("rect.item")
        .attr("x", function(d){return scale(d);})    
}

Here's the final version: http://jsfiddle.net/HF57g/2/

answered Mar 22 '13 at 14:26

altunyurt

2,821
3
38
53

you should accept your own answer so that the question is no longer "unanswered" – vals Mar 24 '13 at 09:17

How to zoom in/out d3.time.scale without scaling other shapes bound to timeline

1 Answers1

Linked