在缩放后在D3.js中添加具有转换的对象

Question

在d3.js示例中，目标是更改X＆amp; Y缩放以显示添加到屏幕外的新添加的圆圈。

目前，如果您要更改缩放比例，然后单击按钮添加新圆，缩放级别突然重置为1.现在拖动视图将使缩放比例再次变为正确，这是在添加圆圈之前，缩放比例相同。

但是，如果您将第123行的redrawWithTransition()更改为删除转换的redraw()，则此问题就会消失。

如果在没有先缩放的情况下添加圆圈，一切正常。

为什么我们必须再次拖动视图以获得正确的缩放比例？我们如何避免必须执行此额外拖动并仍使用redrawWithTransition()中的过渡？谢谢!!

Jsfiddle： http://jsfiddle.net/NgWmU/

---

因为在添加圆圈后再次进行平移可以解决问题，所以我尝试在最后调用redraw()，但没有区别！除了redraw()之外，平移/缩放是否会触发其他内容？

Jsfiddle： http://jsfiddle.net/NgWmU/2/

---

首先，用户缩放/平移并最终得到如图A中的视图。接下来，添加新的圆圈，我们应该得到图C，但是我们得到图B，其中用户的当前平移/缩放显着改变

---

另一个案例

如果用户平移/缩放到与顶部图形类似的视图，则添加新圆圈应略微重新定位现有圆圈，而是重置整个视图。

正在考虑类似的事情：

// Copy existing domains
var xMinOld = xMin,
    xMaxOld = xMax,
    yMinOld = yMin,
    yMaxOld = yMax;

// Update domains
var yMin = d3.min(data.map( function(d) { return d; } )),
    yMax = d3.max(data.map( function(d) { return d; } )),
    xMin = d3.min(data.map( function(d) { return d; } )),
    xMax = d3.max(data.map( function(d) { return d; } ));

if(x.domain()[0] > newData[0] || x.domain()[1] < newData[0]) {
    if(x.domain()[0] > newData[0]) {
        x.domain([xMin, xMaxOld]);
    } else {
        x.domain([xMinOld, xMax]);
    }
    zoom.x(x);
}

if(y.domain()[0] > newData[0] || y.domain()[1] < newData[0]) {
    if(y.domain()[0] > newData[0]) {
        y.domain([yMin, yMaxOld]);
    } else {
        y.domain([yMinOld, yMax]);
    }
    zoom.y(y);
}

但最终视频仍会重置，因为我们会将更新的比例x和y传递给zoom ......