I am using the d3.behavior to attach a zoom event to my SVG, so then the mouse wheel is used I can get a zoom event with translate and scale which I then use to set the transform attribute of the element.
It seems the zoom.scale value is persistent somewhere so every time the mouse wheel is used it always contain the correct zoom value, taking into account of all the previous zoom events. This is cool but I need a way to clear that value, say a reset zoom button. When the user clicked on the button, next time he scrolls to zoom the element will be scaling from its original size again.
So where does D3 store this value and how do I reset it?
UPDATE:
This question also has another aspect in it: if I programmatically set the "transform" attribute to do a scaling transformation, the zoom event will not take those into account. So if I later use mouse wheel to zoom I am screw because I can trashing the original transformation. Thus I need a way to programmatically set, not just reset, the "translate" and "scale" value of the zoom event, wherever it is storing them.
The zoom scale is stored in your zoom object. I'm guessing you have a line of code that looks like:
var zoom = d3.behavior.zoom()
Getting the scale from that object is simple:
zoom.scale()
To zoom out x2:
zoom.scale( zoom.scale()/2 )
Translation works the same way, with zoom.translate() and zoom.translate( [x, y] ) to get and set.
To keep the display transform in sync with the zoom, just make sure that when you update one, the other is also updated.
There's a easier way in D3 v5. You can call selection.call(zoom.transform, d3.zoomIdentity); to reset the zoom, and even apply a smooth transition like selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity);.
Source:
https://github.com/d3/d3-zoom#zoom_transform
https://github.com/d3/d3-zoom#zoomIdentity
Related
I'm using scaleUtc and bottomAxis with .tickCenterLabel(true).
When pan and/or zoom left most label disappear.
Initial state
On pan
Is there are way to prevent that? ... or another way to archieve desired visual?
Thanks in advance...
I was not able to find any way ...
I am trying to play an animation when a scene is instanced. It is a simple animation that translates y from -5 to 5. The animation plays but it plays at x = 0 and z = 0. I understand this is because the translation values for the respective co-ordinates in the animation are set to 0. I have a spatial node on my player scene that can grab transform info and pass it on to my animated scene, but I do not know how to dynamically change the x and z values of the key frames in script.
This answer contains three solutions to the problem...
Target a sub-property
If I understand correctly you want to animate only the y coordinate, and leave the other coordinates unchanged. That is, you don't want to animate the translation vector. You want to animate the y or the translation, a sub-property. This is possible out of the box, but the UI won't offer it to you.
Start by creating a track from the animation editor. You click on "Add Track", select "Property Track", and then on the object you want, and select translation. Now, while the track is empty (no key frame inserted yet), modify the track name to :y at the end.
The track would have been create with a name such as SpatialNodeName:translation, you are going to change it to SpatialNodeName:translation:y.
Afterwards, when you add key frames, they will be for translation.y. Note: doing SpatialNodeName:transform:origin:y or even SpatialNodeName:global_transform:origin:y also works. Similarly, you can imagine how do it for only rotation or scaling, and so on.
Create custom properties and animate them
I'll also mention that another option is using a Tween node (which are easier to create from code).
And also that both Tween and AnimationPlayer can animate any property. Thus, if you need to animate something that is not available, consider adding a property (see setget).
For example:
export var y:float setget set_y, get_y
func set_y(new_value:float) -> void:
transform.origin.y = new_value
func get_y() -> float:
return transform.origin.y
Then you can add a track for the custom property, and animate it like any other.
By the way, also notice the AnimationPlayer can also have "Call Method" tracks.
Modify the animation
Manipulating an animation from code is also possible. I've seen an example elsewhere. You can call get_animation on the AnimationPlayer to get the animation. Then on the returned animation you can call track_get_key_value and track_set_key_value. However, this rarely what you want to do in practice (unless you are making a Godot addon that creates or modifies animations or something like that).
Im using zoom and pan on a map in d3 v4. When the map is zoomed in and a single click is made, the map reverts back to its original size. How can this be stopped? Id like the map to remain in any zoom state even on click.
Thanks
New to D3 here. I am attempting to combine brush and zoom(ex1) with multiple brushes(ex2).
The idea is that the user will be able to create multiple brushes on top of Ex1's focus chart to make annotations on the data. Which I am able to do. However, I am only able to update one(the first) annotation brush position on the chart after zooming using this on ex2's zoomed function:
.select("#brush-0").call(brushes[0].brush.move, lastSelection.map(t.applyX, t));
Where t is the zoom transform and lastSelection is the selection from the last brush that was created. Very hacky, I know, but at least behaves as expected.
I would like to be able to update all the brushes that are stored in the brushes array after zooming and panning in a way that can be called from the zoomed function. Help!
EDIT:
I have recreated the issue with my (flawed) solution attempt here: jsfiddle.net/0pk8wce9/1
I am using Flot to plot images for our project. For pre-defined shapes like line, pie, I can add tooltip through flot.tooltip.
However, we have some images that are drawn through Html5 canvas API, such as Here. I would like to add a tooltip for the red rectangle and another tooltip for the blank area. Any library to make it work?
With canvas there isn't a good way to detect when the mouse hovers over a particular drawn item; it's just a buffer, with no idea of what operations were used to draw into it. Flot's own hover detection has no concept of what was drawn on the canvas; it just knows that, e.g. the pie starts at a particular point and extend outwards a certain number of pixels.
So no matter what, you will have to write a function that accepts a mouse event, examines whatever data you used to draw the image, and decides what that corresponds to.
Where Flot could help is in providing a way to override the built-in hover function with your own; then the tooltip plugin would simply work with your function. Since you can't currently do that, you have a choice of a) modifying the tooltip plugin to use your function, or b) registering your own mousemove listener on the overlay element, which then generates 'fake' plothover events for the tooltip plugin to consume.