javascript - d3 缩放和 slider 问题一起工作

标签 javascript reactjs d3.js slider zooming

我有一个 SVG 图形,它与 d3 缩放完美配合。但是,需求是添加 slider 并使用 slider 和鼠标滚轮控制缩放。

我现在面临的问题是生成一个转换对象,例如: 让 sliderScale = zoomIdentityManual.scale(newK); //newK 是我计算的基于 slider 的新比例。

又好了。但是当用户在 slider 之后开始通过鼠标缩放时,图形会跳来跳去。我明白为什么。因为鼠标事件与我手动生成的转换对象完全独立。

我找到了这个例子,( http://bl.ocks.org/bollwyvl/871b7c781b92fd0044f5 ),主要区别在于 d3 的版本。它是 v3,我正在使用 v4。正如您在滑动功能中看到的那样:

函数滑动(d){ zoom.scale(d3.select(this).property("值")) 事件(svg); }

看起来像 .event(svg) 这就是当前事件发生变化的地方。但是版本4没有这样的方法。

总而言之,有没有什么方法可以使 slider 和 d3 缩放一起顺利工作?

最佳答案

我的问题是当 slider 移动时我没有正确缩放。我直接调用函数,但我需要调用 svg 上的缩放操作,例如:

  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));

zoom.transform 是窍门

关于javascript - d3 缩放和 slider 问题一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44729815/

相关文章:

javascript - 是否可以使用 Graphql 生成的模式作为流定义?

javascript - 取消暂停 d3.timer

javascript - 如何让 SVG 圆沿 SVG 路径拖动?

javascript - jQuery 中的多个选择器

javascript - 如何在javascript中替换列表框中的值

javascript - 无法理解 redux 形式的一些代码

javascript - Ng-Joyride 不工作

javascript - 注册表单上的 onClick 出现问题

javascript - d3 React JS : d3. csv正在导入index.html而不是csv文件

d3.js - 使用 D3 缩放和平移时如何将 HTML 元素与 SVG 元素一起翻译