使用D3.js添加时，将画布平移到Reveal Elements

Question

首先将4个红色circle添加到图中，然后在右侧添加3个蓝色circle。新的圈子总是会被添加到右边，画布将继续平移以显示新的圈子。

可视区域如何向右平移以显示新的蓝色圆圈？平底锅应该显示最右边的蓝色圆圈，在圆圈和画布边缘之间有20px的边距，可能有一个.transition().duration(1000)。

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

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

JSFIDDLE： http://jsfiddle.net/YqrLz/4/

所需示例：从

向右平移并在Y方向重新缩放

到

---

更新

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

更新redraw()内的轴的代码是否有问题？

JSFIDDLE： http://jsfiddle.net/ab3zB/3/

Answer 1

所以我认为您正在寻找：http://jsfiddle.net/ab3zB/2/

你努力工作以使这些轴转换。根据您的比例考虑轴。如果您更新比例，只需在轴上.call(yAxis)更新它们。

同样的想法也与圈子有关。我更新了代码，以显示更新的d3-esque模式。调整完这些比例后，只需重新绘制圆圈即可，无需计算实际的平移值。

此外，您的图片显示平底锅的圆圈半径较小。为此，再次考虑一个规模。为半径创建比例，然后在接收新数据时更新该比例。希望有所帮助！

修改

这是一个适当缩放半径和位置的新版本：http://jsfiddle.net/ab3zB/4/。重绘的问题在于它正在改变在更改x标度时已经补偿的平移值。通过删除它，它可以使位置保持一致。

当您开始使用d3.event.scale作为缩放与{zoom}函数无关的circle元素的方法时，会变得有点棘手。 scale将修改已应用于其的当前翻译。例如，如果它被向右翻译20，然后你将其缩放2，那么它也会被移动40.这很快会使代码混乱，试图为此进行调整。一个更简单的解决方案是：

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

现在您有一个半径刻度，当您更新圆圈时，您可以简单地调用zoom.scale()来获取当前刻度值并修改半径。看到小提琴，看看它在行动。