Javascript 当使用D3.js添加元素时，平移画布以显示元素

首先在绘图中添加4个红色

圆圈

s，然后在右侧添加3个蓝色

圆圈

s。新的圆圈总是会被添加到右边，画布将继续平移以显示新的圆圈

可视区域如何向右平移以显示新的蓝色圆圈？平底锅应露出最右边的蓝色圆圈，圆圈和画布边缘之间的边距为20px，可能带有

.transition（）.duration（1000）

它还应在Y方向上重新缩放，以便在平移后仅容纳可视区域中的圆

尝试平移视图失败首先，平移未显示最右边的圆。其次，如果要在添加蓝色圆圈后平移/缩放视图，平移将重置为平移发生前的初始视图位置

JSFIDDLE:

所需示例：向右平移并沿Y方向从

到

---

更新

添加蓝色圆圈并平移图表后，所有圆环的位置相对于彼此看起来是正确的，但相对于轴的位置不正确。在下面的屏幕截图中，您可以看到x=150处的圆圈现在位于x<150处

更新

redraw（）内轴的代码是否有问题

JSFIDDLE:

我相信您正在寻找以下内容：

你太努力了，无法让这些轴过渡。用你的尺度来思考轴。如果您更新了刻度，只需在轴上调用（yAxis）

即可更新刻度

同样的想法也适用于圆圈。我更新了代码，以在更新中显示更像d3的模式。调整这些比例后，只需重新绘制圆，无需计算实际平移值

此外，您的图像还显示了平移的较小圆半径。对于这一点，再次考虑一个标尺。为半径创建比例，然后在收到新数据时更新该比例。希望有帮助

编辑

这是一个新版本，可以正确缩放半径和位置：。重画的问题在于它改变了平移值，而平移值在改变x比例时已经得到了补偿。通过删除此选项，可以使位置保持一致

当您开始使用

d3.event.scale

来缩放未绑定到缩放功能的

圆

元素时，它会变得有点棘手<代码>比例将修改已应用于它的当前翻译。例如，如果将其向右平移20，然后将其缩放2，则其也会移动40。这会很快使代码变得混乱，试图对此进行调整。更简单的解决方案是：

var r = d3.scale.linear()
    .domain([0, 1])
    .range([0, 20])

---

现在您有了半径的比例，当您更新圆时，只需调用

zoom.scale（）

即可获得当前比例值并修改半径。看看小提琴，看看它在起作用。

谢谢Benr，我试过你的方法，效果很好。然而，正如在原来的帖子中更新的那样，在添加蓝色圆圈并稍微平移后，圆圈的对齐是不正确的。有什么想法吗？嗯，我不太确定问题出在哪里。当我使用小提琴时，无论你平移还是缩放，第一个红色圆圈从x=100开始，一直保持在x=100。这不是我们想要的行为吗？我怎么重复这个错误呢？哦，我想我现在明白了。如果你平移，然后添加圆圈，然后再次平移，它会断裂，对吗？它现在工作得很好！我注意到，如果在添加蓝色圆圈后要平移，则会意外地重新缩放视图。它似乎将视图重置为添加蓝色圆圈之前的状态。尝试添加

xAxis.scale（x）；雅克西斯量表（y）

到

redraw（）

函数，但这没有帮助…嘿，所以这必须处理zoom自动设置x/y域并且应该对此负责的事实。因为我们是手动设置的，所以再次调用zoom时，zoom会重置它。如果在调整比例后添加

zoom.x（x）

和

zoom.y（y）

，它应该可以工作。