如何在不缩放绑定到时间轴的其他形状的情况下放大/缩小 d3.time.scale答案

【问题标题】：How to zoom in/out d3.time.scale without scaling other shapes bound to timeline如何在不缩放绑定到时间轴的其他形状的情况下放大/缩小 d3.time.scale
【发布时间】：2013-03-11 16:59:07
【问题描述】：

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？

【问题讨论】：

您能否接受您的答案（按旁边的复选标记？

标签： javascript svg d3.js scale

【解决方案1】：

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

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

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

【讨论】：

你应该接受你自己的答案，这样问题就不再是“未回答的”