I'm having a really strange problem with my d3 graph. It works perfectly if I never enlarge the window past the initial dimensions. The graph will shrink when I shrink the window and enlarge when I enlarge the window. However, if I try to enlarge past the the initial size (when the page first loaded), it will not enlarge. It seems that there is some maximum size set to the dimensions of the graph when the page firsts loads. Does anyone have any idea what could cause something like this?
EDIT: Another issue with my graph is that there a mouse-over tool tip which appears where the mouse is, but it always appears underneath the path line. How can I ensure that it appears above the line?
You need to use the window.onresize function so that the increased area is available for use. Here is an example of a responsive d3 chart using the resize event to update the scales.
For the circle, you need to figure out how to update the circle's coordinates to put the circle in the appropriate place.
Well although this is definitely not an ideal or elegant solution, I did figure out a way to solve this. I set initial width and height to the largest the graph to ever be and then the resize function so it would shrink the the correct size. The graph now resizes up until that very large width and height, which is never reach, so it all works great.
I have the same problem. I initialize the chart like this:
var chart = d3.select(ele[0]).append("svg").attr("class", "chart").attr("height", height).append("g").attr("transform", "translate(15,30)");
Then, on $window.onresize, I get a new height and width (data in there are correct) and try to set them:
chart.attr("width", width);chart.attr("height", height);
And this is not working. Any ideas why?
EDIT: Searching for few hours, find nothing, post the question and find a solution. Maybe this will be helpful for someone:
I changed my above code to
d3.select(ele[0]).selectAll('svg').attr('height',height).attr('width',width);
So I did not used chart to resize, I select the element again. Then it works.
Related
i am trying to achieve an effect in angularjs/ionic, that
handles an image resize upon scrolling beyond the content ("bounce effect").
I.g. a header-image is under the header-bar, that should adjusts in height, when
the the scroll area is pulled down
Here is an Example of what i'm looking for.
I was trying to achieve this by using the $ionicScrollDelegate method getScrollPosition(), since that gives me scroll position. But the main problem is, that the image is inside the scroll area and that bounce box outside. So i cannot access the height of this image.
Anyone tried something similar?
I was searching on here and everywhere i could think of, but couldn't find a solution.
I need to use image map in my website, to add different links to each part of image.
But I have problems with its responsiveness. I couldn't change map area's size while resizing window.
Can anyone help me with this? The method is not important, I can use either Js or Css.
Update:
I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.
Do anyone have this problem too?
Imagemap is a very Old way to create websites I preffer using photoshop image sÃlice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more
If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.
You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)
Here are some examples of using RaphaelJS: LINK1 LINK2
And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)
Right now I'm using the code here: https://github.com/CollectionFS/Meteor-CollectionFS#basic-example
Suppose I want a thumbnail 100x100.
But say my image is 400x200, the code above will produce a thumbnail 100x50.
What I want to happen in this example is for the image to be resized to 200x100, and then clipped to 100x100.
How do I do that? How can I get the height and width? I know I can use gm's size function, but I can't wrap my head around all the callbacks.
Try:
gm(readStream, fileObj.name()).autoOrient().resize('100', '100', "^").gravity('Center').extent('100', '100').stream().pipe(writeStream);
The autoOrient() will automatically turn any mobile-phone photos to the correct direction (otherwise they sometimes come in sideways). The ^ that gets passed to resize is an option that makes the "smallest edge" of your image resize to 100. So this will leave an "overhang" on the "correct" edge. It takes care of your image being really wide or really tall. The extant then crops your image removing the overhang. The gravity('Center') makes the cropping effect of extant occur at the center of the image.
The only the thing I still haven't figured out is how to crop from the center of the image. According to most examples, calling gravity('center') should do this, but it's not working for me. It always crops from the corner. It's working, it just doesn't look the best as most subject matter is in the center of an image.
EDIT: The gravity call needs 'Center' to work, not 'center'. The call now works as intended. Also added autoOrient() call.
Here's the official gm doc explaining the options. But it took researching how to do this in gm for node.js to figure the above syntax.
Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.
I am building an Webpage that uses SVG, Canvas and, of course, HTML. The idea of this page is to animate the redrawing of some of svg-paths on the canvas. The paths I like to redraw are annotated with an namespace Attribute, all other paths are just displayed as they are. That is all working fine! The performance leak appeared the last two hours while I was adding some content to the page.
But at first a little illustration of the page setup:
The SVG and the Canvas are both 4000 * 4000 px wide and lie directly over each other in one container div. Going from one "page" to another means to tween the upper left edge of this container. This was also working fine since the discussion of inserting text turned in the direction of using html div container, instead of the svg itself.
So i inserted a third container div in which all the texts are stored and after svg is loaded they are positioned absolutly.
With every div I added the "pan-tween" and even the drawing performance decreased to a Point that is just too low.
I am searching for way to bring the performance back to a level that is acceptable for the user. One of my ideas is to set text divs to display : none, or visibility : hidden, as long as they are not displayed actually. Another option is to tween only svg and canvas, after this is finished placing the text-div-container in one step. But I am currently not sure which solution is better, or if there isn't something much better. So if anybody has an Idea, please let me know.
Thanks for reading!
Greetings Philipp
Try to pan the outer "text div" in intervals(say 10ms or 50ms). I this with a lot with rendering, in HTML usually I use greater values like 100ms or 150ms(I use to do this with canvas).
Didn't understand if you pan the outer div or all the "text divs".