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

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

我正在努力实现图表上的线条如何随网格缩放的效果。绘制方框的代码位于

update（）

方法中（示例中直线和圆的更新位置相同）

这是我的秤：

 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、宽度和高度，但我似乎无法正确计算

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

---

您只在新（输入）矩形上设置位置值，而不在更新矩形上设置位置值。所以当你更新的时候没有什么变化。谢谢，这很有效。当装载大量箱子时，您是否注意到任何可能导致此功能无法工作的因素？如果是这样，那就是答案。一旦加载一个更大的数组，它们就会开始重叠。你能发布一张关于重叠的图片吗？我还需要更多地了解你是如何计算顶部/底部位置的。@AmeliaBR谢谢你的回复。我贴了一张照片。请注意，数据中的每个框都是“1分钟宽”，如果使用2周的“1分钟”，则会产生这样的结果。我仍然不清楚您的数据代表什么，您如何确定位置，以及您希望它看起来像什么。。。当你缩小，但没有放大时，它看起来好吗？您发布的代码应该在x和y域中正确地缩放宽度和高度，但我不知道您如何确定top、bottom和start的数据值。

 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();