javascript - 如何在不缩放绑定到时间轴的其他形状的情况下放大/缩小 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？

score 6 · Accepted Answer

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

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

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

1 回答 1