问题的最终根源是 d3.interpolateZoom。该插值器的缩放插值速度比平移速度更快 - 尽管它们大多数都是同时转换的。该模式的实现是d3.interpolateZoom是基于此paper https://www.win.tue.nl/~vanwijk/zoompan.pdf.
因为缩放和平移两者的插值方式不同d3.interpolateZoom，当比例减小/增大的速度快于平移值时，图表的一侧会出现间隙。
d3.interpolateZoom当您在过渡上调用缩放时使用。
但是，如果您直接在转换上应用转换，请使用.attr()，d3 过渡将使用d3.interpolateString，它将在开始和结束字符串中搜索相应的数字并使用d3.interpolateNumber关于那些。这将对缩放和平移应用相同的插值。
使用这两种方法，我们可以比较 d3.interpolateZoom 和 d3.interpolateString 之间的差异。下面黑色矩形使用d3.interpolateString而橙色矩形使用d3.interpolateZoom。单击矩形开始过渡：
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 300);
var g1 = svg.append("g"), g2 = svg.append("g");
var zoom1 = d3.zoom().on("zoom", function() {
g1.attr("transform", d3.event.transform);
});
var zoom2 = d3.zoom().on("zoom", function() {
g2.attr("transform", d3.event.transform);
});
g1.call(zoom1.transform, d3.zoomIdentity
.translate(150, 100)
.scale(2));
g2.call(zoom2.transform, d3.zoomIdentity
.translate(150,100)
.scale(2));
g1.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 50)
.attr("height", 50);
g2.append("rect")
.attr("x", 22)
.attr("y", 22)
.attr("width", 46)
.attr("height",46)
.attr("fill","orange");
d3.selectAll("rect").on("click", function() {
g1.transition()
.duration(6000)
.attr("transform", d3.zoomIdentity)
.on("end", function() {
d3.select(this).call(zoom1.transform, d3.zoomIdentity);
})
g2.transition()
.duration(6000)
.call(zoom2.transform, d3.zoomIdentity)
});
<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
在第一个矩形使用 .attr() 过渡变换的情况下，我们需要随后调用缩放以确保缩放具有当前变换，在本例中我们不需要，但如果您想在变换后使用缩放你需要这样做
比较这两个我们得到：
（Y 轴表示从开始属性到结束属性的转换中剩余的百分比）
您希望缩放和平移在转换时以相同的速率同时移动。如果我们使用补间函数，我们就可以做到这一点。与上面不同的是，我们不能只使用transition().attr("transform",newTransfrom)因为您也在绘制画布并更新轴。因此，我们需要创建自己的补间函数，该函数可以使用当前的变换和比例，将其应用于轴、画布和标记。
例如，不调用缩放（将使用 d3.interpolateZoom）：
function zoomToExtent(d0, d1) {
zoomRect.call(zoom).transition()
.duration(1500)
.call(zoom.transform, d3.zoomIdentity
.translate(-xSVG(d0), 0)
.scale(width / (xSVG(d1) - xSVG(d0))));
}
相反，我们可以使用补间函数来控制元素的变换并应用相同的插值器来缩放和平移：
function zoomToExtent(d0, d1) {
//get transition start and end values:
var startScale = d3.zoomTransform(zoomRect.node()).k;
var startTranslate = d3.zoomTransform(zoomRect.node()).x;
var endTranslate = -xSVG(d0);
var endScale = width / (xSVG(d1) - xSVG(d0));
zoomRect.call(zoom).transition()
.duration(1500)
.tween("transform", function() {
var interpolateScale = d3.interpolateNumber(startScale,endScale);
var interpolateTranslate = d3.interpolateNumber(startTranslate,endTranslate);
return function(t) {
var t = d3.zoomIdentity.translate(interpolateTranslate(t),0).scale(interpolateScale(t));
zoomed(t);
}
})
.on("end", function() { // update the zoom identity on end:
d3.select(this).call(zoom.transform, d3.zoomIdentity
.translate(endTranslate, 0)
.scale(endScale));
})
}
您可能会注意到我将变换值传递给缩放函数，因为没有 d3.event.transform ，我们需要修改缩放函数以使用传递的参数（如果可用），否则要依靠事件变换：
function zoomed(transform) {
var t = transform || d3.event.transform;
...
总而言之，这可能看起来有些东西像这样 https://bl.ocks.org/Andrew-Reid/0d9a717117b4224b6abd3122717985a7.
对于两种过渡方法之间的另一个比较，我创建了一个可以在两个缩放标识之间切换的网格比较：
var svg = d3.select("body").append("svg")
.attr("width", 510)
.attr("height", 310);
var g1 = svg.append("g");
var g2 = svg.append("g");
var rectangles1 = g1.selectAll()
.data(d3.range(750))
.enter()
.append("rect")
.attr("x", function(d) { return d%25*20; })
.attr("y", function(d) { return Math.floor(d/25)*20; })
.attr("width", 20)
.attr("height", 20)
.attr("fill","#ccc")
.attr("stroke","white")
.attr("stroke-width", 2);
var rectangles2 = g2.selectAll()
.data(d3.range(750))
.enter()
.append("rect")
.attr("x", function(d) { return d%25*20; })
.attr("y", function(d) { return Math.floor(d/25)*20; })
.attr("width", 20)
.attr("height", 20)
.attr("fill","none")
.attr("stroke","#444")
.attr("stroke-width", 1);
var startZoom = d3.zoomIdentity
.translate(-250,-200)
.scale(4);
var endZoom = d3.zoomIdentity
.translate(-100,-100)
.scale(5);
var zoom1 = d3.zoom().on("zoom", function() { g1.attr("transform", d3.event.transform); });
var zoom2 = d3.zoom().on("zoom", function() { g2.attr("transform", d3.event.transform); });
g1.call(zoom1.transform, startZoom);
g2.call(zoom2.transform, startZoom);
var toggle = true;
svg.on("click", function() {
toggle = !toggle;
g1.transition()
.duration(5000)
.call(zoom1.transform, toggle ? startZoom: endZoom)
g2.transition()
.duration(5000)
.attr("transform", toggle ? startZoom: endZoom)
.on("end", function() {
d3.select(this).call(zoom2.transform, toggle ? startZoom: endZoom);
})
})
rect {
opacity: 0.5;
}
<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
