/ 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 / 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?

http://jsfiddle/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/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?

• javascript
• svg
• d3.js
• scale

Share Improve this question Follow edited Feb 3, 2014 at 22:22 Joeytje50 19.2k1515 gold badges6868 silver badges9999 bronze badges asked Mar 21, 2013 at 23:37 altunyurtaltunyurt 2,95644 gold badges3939 silver badges5353 bronze badges 1

• could you perhaps accept your answer (by pressing checkmark beside it? – VividD Commented Jan 17, 2014 at 18:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/HF57g/2/