4

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?

Joeytje50
  • 18,118
  • 14
  • 60
  • 91
altunyurt
  • 2,775
  • 2
  • 35
  • 52

1 Answers1

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/

altunyurt
  • 2,775
  • 2
  • 35
  • 52