I'm trying to adjust the zoom level manually in a fairly simple d3 visualization I'm developing. See: http://jsfiddle.net/TXPcM/
After zooming and panning around (use shift+click to zoom out) press the "Default Zoom" button then try to pan around again. You'll notice a jarring shift as it "resets" to the state prior to the button press.
The code is a bit of a prototype and fairly long winded - but look for the applyZoom function. The intention here was to re-apply the zoom behaviour and thus, hopefully clear out any cached values it might be using. Doesn't seem to work. Suggestions?
The way to do this is to modify your zoom object, rather than just modifying (or in your case re-creating the zoom).
So grab your zoom object and do the following:
zoom.translate([x,y])
.scale(scale);
i did not look at your code but this d3 google group thread has the answer you're looking for, i think:
https://groups.google.com/d/topic/d3-js/-qUd_jcyGTw/discussion
Related
I am working on a tabletop application where the touch input is represented as browser touchevents.
I need a zooming function in the OL which is, alike to ol.View.rotate and zoom with the zoom-center-point different from view-center-point. I know about the ol.interaction.MouseWheelZoom which does exactly the thing. However, I cannot use it. I've already tried the sequence of:
translate zoom-center-point to view-center-point
zoom
translate back
but this is a bit wierd considering the fact, that the implementation already exists for ol.interaction.MouseWheelZoom. Any idea?
At the end, I used part of the code for ol.interaction.PinchZoom. Source: https://github.com/openlayers/openlayers/blob/master/src/ol/interaction/pinchzoom.js
I did some research on this topic here, on the GoJS documentation site, etc., but I am not able to find anything coming even near to what I want.
Here's the thing: I have a diagram written in GoJS. As the data behind it is fairly big, it happens to be fairly large. So I was wondering if there was any possibility to increase the zoom speed built into GoJS, so that with one scrollstep more scale was added.
What i tried until now is doubling the
scrollHorizontalLineChange:
scrollVerticalLineChange:
both to 32.
No difference to before so far. Or is there any of the many tools GoJS has, to allow me this sweet increase when needed?
Theoretically, it is possible to use the "ViewportBoundsChanged" event to change the zoom factor when it's triggered. But would this be a good solution?
Thanks in advance.
Oh and if any additional details are needed, I will be happy to provide them.
Set CommandHandler.zoomFactor, http://gojs.net/latest/api/symbols/CommandHandler.html#zoomFactor :
$(go.Diagram, ...,
{ "commandHandler.zoomFactor": 1.2 },
...)
The ToolManager handles mouse events when no specific Tool is running, and it calls Tool.standardMouseWheel, which calls CommandHandler.increaseZoom or CommandHandler.decreaseZoom as appropriate.
By the way, Diagram.scrollVerticalLineChange controls how far the diagram is scrolled when you click on the scrollbar's up button or down button. Or when you call http://gojs.net/latest/api/symbols/Diagram.html#scroll
I am looking to implement a map with a 'play/pause' feature that will overlay items as the time scale progresses. However, I also wanted to give users the ability to set the time themselves. Very similar to
Mike's work here
Any ideas on the best way to implement this? I would like to avoid html element sliders because of a lack of styling options (as far as filling up the bar with different colors, it gets messy overlaying SVG). There is also d3.slider (independent open source on git), but the documentation is lacking. Is using a brush handler the best option?
Thank you!
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I have a small problem with how should i think a... problem. I want to do something somehow similar with this: when you move mouse near to the edges, you will see images scrolling faster than how is scrolling when you have the mouse in the midle of the DIV.
Don't know if i explained right, but ... i don't know how to tackle this. I'm sure that is binded on mousemove but also i guess is somehow related to math. And math isn't my best skill :D
Thanks guys!
Unfortunately there's not much more to tell you than what you can already read in the source code of the site you linked from line 59 onwards.
I'd likely recommend simply trying to duplicate something similar within your own sandbox page using that code they have as a guideline. Simply strip out everything you can and just start with a single image, bind the mousemove event and try and get relative positions using offset (see jquery - offset).
It's a pretty nice implementation of the new canvas tag though, I haven't seen it used much yet, so thanks for passing on the link. I can at least offer you some interesting links on the canvas tag that might give you a few pointers.
This is an old question, but you can calculate a procentage based on the distance between the mouse position and the edges. Then use that procentage to set the speed of the animation.