如何放大/缩小d3.time.scale而不缩放绑定到时间轴的其他形状 [英] How to zoom in/out d3.time.scale without scaling other shapes bound to timeline

问题描述

http://jsfiddle.net/HF57g/ 是单个事件（蓝色rect）的示例，放置在时间线上。如果我放大时间线，rect在x轴上的位置改变与轴上的刻度和谐。但是同时，rect是水平缩放的。

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)");

到

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

，如 http://jsfiddle.net/HF57g/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.

如何在不缩放其他相关形状的情况下放大/缩小time.scale？

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

推荐答案

最后添加了一个更新函数，根据scale（x）返回的新位置重新排列矩形的位置。

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);})    
}

以下是最终版本： http://jsfiddle.net/HF57g/2/

这篇关于如何放大/缩小d3.time.scale而不缩放绑定到时间轴的其他形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！