D3在变焦时防止失真

Question

我想在D3中获得时间线。由于它支持缩放和平移，所以rects必须在缩放时缩放并进行变形，但我希望有一些文字在平移时只能在x轴上进行转换 - 我希望它保持相同的大小，而不管放大的方式如何我们正在摆脱x轴上的丑陋失真。

请参阅http://jsfiddle.net/kLs7D/4/我的意思是。

Answer 1

为了避免失真，最好的方法是不将transform应用到的元素，但使用改性规模重绘它们：

svg.selectAll("rect.timebar").attr('x', function (d) { 
     return x(d.start); 
    }) 
    .attr('width', function (d) { 
     return x(d.end) - x(d.start); 
    }); 
svg.selectAll(".thetext").attr('x', function (d) { 
     return x(d.start); 
    }); 

完整示例here。