D3 - 在缩放时调整图表框的大小

Question

我希望绘制一组方框（随着时间的推移，就像股票图表一样），但我很难让它们随网格一起放大/缩小。

我正在处理this example并试图获得与图表中的线如何随网格一起变焦的相同效果。我绘制方框的代码位于update()方法（相同的位置，示例中更新了直线和圆圈）

 SimpleGraph.prototype.update = function () {
        var self = this;

        self.vis.selectAll("rect")
            .data(data.boxes)
            .enter().append("svg:rect")
            .attr("x", function(box) { return self.x(box.StartTimeStamp); })
            .attr("y", function(box) { return self.y(box.Top); })
            .attr("height", function(box) { return self.y(box.Bottom) - self.y(box.Top); })
            .attr("width", function(box) { return self.x(box.StartTimeStamp + 5*60000) - self.x(box.StartTimeStamp); });
 }

以下是我的尺度：

 self.x = d3.time.scale()
            .domain(d3.extent(data.boxes, function(box) { return box.StartTimeStamp]; }))
            .range([0, self.innerWidth]);

 self.y = d3.scale.linear() //inverted domain
            .domain([d3.max(data.boxes.map(function (box) { return box.Top; })),
                     d3.min(data.boxes.map(function (box) { return box.Bottom]; }))])
            .nice().range([0, self.innerHeight]).nice();

除了比例，我的代码大多相同。结果是网格相应地缩放，但我的盒子保持固定。我一直在玩盒子上设置x，y，宽度，高度，但我似乎无法正确计算。

编辑：这是包含大量数据的结果图片