如何使用 Javascript 或 D3 JS 减慢缩放功能的速度 [重复]答案

【问题标题】：How to slow down the speed of zooming functionality using Javascript or D3 JS [duplicate]如何使用 Javascript 或 D3 JS 减慢缩放功能的速度 [重复]
【发布时间】：2020-01-25 10:05:40
【问题描述】：

如何使用 Javascript 或 D3 JS 减慢缩放功能的速度。我尝试过的如下。我为此使用了 d3 js。

var zoom = d3.behavior.zoom().on('zoom.zoom', function() {
  root.attr('transform', 'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')');
})

var svg = d3.select('svg').call(zoom);

这段代码非常适合缩放，但是当它缩放时非常快并且看起来很奇怪。提升滚动条进行缩放时如何减慢速度。

【问题讨论】：

影响转换和翻译速度的是参数： - d3.event.translate - d3.event.scale 解决方法是减少这些，使效果不那么明显。尝试除以二。
这对我不起作用。这就是我发布此解决方案的替代答案的原因。所以不要不必要地标记为重复。该答案会影响过渡并且不会均匀缩放
看看@jsfiddle.net/839bcnmy/7。这需要一些数学运算，但您需要使用 transform.k 并计算与前一个的差异。然后，您可以决定除以或乘以增加或减少变化。

标签： javascript jquery d3.js

【解决方案1】：

添加transition-duration

div {
  width: 100px;
  height: 100px;
  background: red;
  transition-duration: 2s;

}

div:hover {
   transform:translate(10px) scale(0.5);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：