javascript - 如何在不缩放绑定(bind)到时间轴的其他形状的情况下放大/缩小 d3.time.scale

Question

http://jsfiddle.net/HF57g/是放置在时间线上的单个事件(蓝色矩形)的示例。如果我放大时间轴，矩形在 x 轴上的位置会随着轴上的刻度变化而变化。但与此同时，rect 被水平缩放。

如果我修改下面的代码部分

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/禁用水平缩放，然后在放大/缩小期间矩形的位置变化比轴的变化大得多。

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

Answer 1

我最后添加了一个更新函数来根据 scale(x) 返回的新位置重新排列矩形的位置。

function update_events(){
    return svg.selectAll("rect.item")
        .attr("x", function(d){return scale(d);})    
}

这是最终版本:http://jsfiddle.net/HF57g/2/