d3的可拖动和缩放时间轴

Question

我想制作一个时间轴，用户可以选择滚动缩放或选择要缩放的区域。 有第一喜欢的一些例子： https://bl.ocks.org/mbostock/4015254 或者与刷面积放大： https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6
但我无法找到两者兼具的例子。我怎样才能做到这一点？或者有没有我错过的例子？

Answer 1

这不是最直接的实施。您会注意到，基于笔刷的缩放不依赖于d3.zoom，而是通过监听器执行缩放，该监听器触发事件​​以执行缩放轴并相应移动绘图元素所需的任何操作。

相比较而言，所有基于滚动变焦实例一般依赖于d3.zoom其利用d3.zoom()行为跟踪，同时摇摄/变焦和是用于更新各种图表元素单独负责在图上执行的所有变换。难点在于2种方法完全不同，如果您通过刷子手动更改图表视图，则需要找出一种方法来更新d3.zoom引用的内部缩放转换，以便它了解通过刷新所做的更改基于画笔的缩放事件。

这并非易事，因为d3.zoom并非设计用于从别处获取信息，而且执行的转换的内部记录不意味着可更新/可变。您可以通过selection.call(zoom.transform, d3.zoomIdentity);更新转换，但不幸的是，它还会触发与实际缩放行为有关的大量事件，这不是您想要的，因为您已经使用基于笔刷的缩放处理了所有缩放行为。一个丑陋的，但有效的解决办法，我是可以使用重置缩放转换是突变绑定到d3.zoom行为DOM节点的实际.__zoom领域如下：

// WARNING: Ugly mutation of __zoom property of pan/scroll-zoom rect to 
// reset the transform without having to fire events associated with zoom 
// d3.select(".zoom").node().__zoom = {k: 1, x: 0, y: 0}; <-- Fails since __zoom contains other hidden objects 
scrollZoom.node().__zoom["k"] = 1; 
scrollZoom.node().__zoom["x"] = 0; 
scrollZoom.node().__zoom["y"] = 0; 

因此，例如：如果你需要一个用于矩形缩放的二维刷子，而且基于d3.zoom的缩放用于平移和鼠标滚动，随后在任何时候使用二维刷子进行缩放时，都需要将d3.zoom转换重置为上述的标识转换。当由于记录变换而造成的平移/鼠标滚动操作链接基于2D画笔的缩放操作时，这可以防止平移/滚动响应中的抖动和粗糙抖动，d3.zoom与显示的视图不同步（由于2D画笔在没有d3.zoom的知识的情况下改变视图）。

这里是别的，重要的是要注意的：

d3.zoom有一个限制，它目前只支持一个共同的缩放比例为X和Y轴（Source）。这不幸意味着无法将基于二维刷子的缩放映射到基于d3.zoom的方法，因为基于2D刷子的缩放会在X和Y中产生不同的缩放比例。如果您想用最少的问题进行操作，请使用一致的方法，我建议您使用d3.xyzoom进行调查。这是d3.zoom的一个分支，它实现了对X和Y轴的不同比例的支持。这将使您能够计算任何2D画笔选择的相应X和Y缩放比例和平移值，然后您可以将它们输入到d3.zoom中，从而使您可以使用常用方法执行所有缩放（这也会导致最小量代码重复）。这就是说，如果你只对一维基于笔刷的缩放感兴趣，你应该能够将它映射到d3。缩放方式，以便您不必处理2种不同的路径，以处理图表中所有轴和其他图形元素的视图和缩放。这里是一个很好的例子：

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我这个职位的长度道歉，如果这是一个有点散漫。我正在努力在几天内将我的工作放在一块，我会尽量绕圈回来，并发布一个链接，当我这样做。我一周前才开始学习D3，所以我一直在学习。