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

问题

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/

来源：https://stackoverflow.com/questions/15560145/how-to-zoom-in-out-d3-time-scale-without-scaling-other-shapes-bound-to-timeline