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。