How to zoom in/out d3.time.scale without scaling o

问题:

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?

回答1:

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/