[英]Update drag/scroll origin after an update of the data with transition in D3
I work on a chart with dragging, zooming and updates. 我在图表上进行拖动,缩放和更新。 This mostly works, however, after adding new data, the dragging position does not update.
这在大多数情况下有效,但是,添加新数据后,拖动位置不会更新。
Steps to reproduce: 重现步骤:
So I guess, when adding new data, I somehow have to update the drag origin. 所以我想,在添加新数据时,我必须以某种方式更新拖动原点。 But how?
但是如何? So far I was not able to find any example of that.
到目前为止,我找不到任何示例。 I also looked at the code of the dragging functionality of D3 , but it's still not clear to me.
我还查看了D3拖动功能的代码 ,但对我来说仍然不清楚。 Same thing happens for the zooming, I guess it is the same problem there.
缩放也会发生同样的事情,我想那是同样的问题。
Code and demo can be seen here: http://jsbin.com/irixag/1/edit 可以在这里查看代码和演示: http : //jsbin.com/irixag/1/edit
Edit: If it is not clear what I mean, please tell me so that I can rephrase the question. 编辑:如果不清楚我的意思,请告诉我,以便我重新表述这个问题。
Okay, I've been sifting through your code and the d3.js source and I've noticed a couple of things. 好的,我一直在仔细检查您的代码和d3.js源代码,并且注意到了几件事。
First, the gist of my solution is to add 首先,我的解决方案的要点是添加
function update() {
...
if (shiftRight) {
zoom.x(x); // You're missing this line
...
}
...
}
Here's why: 原因如下:
You are initializing the horizontal drag and drop by using the .x(x)
call on the d3.behavior.zoom()
object. 您正在使用
d3.behavior.zoom()
对象上的.x(x)
调用来初始化水平拖放。 This looks fine, except this drag & drop handler is not designed for a varying origin. 看起来不错,除了此拖放处理程序不是为变化的原点设计的。
Basically, when you call d3.behavior.zoom().x(x)
you are declaring that right now the value of x
is the origin. 基本上,当您调用
d3.behavior.zoom().x(x)
您声明的是x
的值现在是原点。 Now, d3.js stores this value, so even though you are shifting the window right in an animation loop, drag & drops will still honor that original origin. 现在,d3.js会存储此值,因此即使您在动画循环中向右移动窗口,拖放操作仍会保留原始原点。
In the d3.behavior.zoom
source there are three variables of interest, x0
, x1
, and translate
. 在
d3.behavior.zoom
源中,有三个感兴趣的变量x0
, x1
和translate
。 x1
is a reference to the current value of the x
variable you passed in. x0
is the copied value of x
when you initially passed it in. translate
is the aggregate translation of all your drag+drops combined. x1
是对当前值的参考x
你传递的变量, x0
是复制的值x
在最初传入的。 translate
是所有阻力+滴合并的总翻译。
Now, conveniently, calling zoom.x(x)
resets all three of these variables, which means the translation will only be aggregated against the current origin, and the origin will reflect your shifting window. 现在,方便地调用
zoom.x(x)
重置所有这三个变量,这意味着转换将仅针对当前原点进行汇总,并且原点将反映您的移动窗口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.