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 ...
Related
I'm trying to create a scattered chart with Angular-Kendo,
and have some challenges with zooming.
The current challenge is that upon zoom in by area selection with the mouse.
It does the zoom perfectly, besides the fact that it ruins the axis numbers.
I created an example [not angular oriented, but very clear].
Simple example - you can try to zoom with mouse drag.
Already tried the [labels]= "{format: '{0: n3}'}", etc... but it didn't work...
Thanks for any help.
The solution I found for this very painful item is:
using kendo-chart-x-axis instead of category-axis :-)
I have an issue on triggering mouse event on a svg.
I am using the library d3.js to handle some graphic tasks. Specifically, when I manually click on a position on the svg, d3 draws a red or blue (depending on the path I am clicking on) circle on it and then returns the d3.mouse coordinates of the click.
Now, suppose I have a set of coordinates and want to trigger programmatically click on the corresponding point on the svg, so that it draws a red or blue circle automatically. How can I achieve that?
I read many solutions here but none allows to click on specific coordinates (while I can easily click on a specific path, for example).
My ideal function would be:
var svgd3 = d3.select('svg#id_svg')
function d3click(x,y,svgd3){
//does the click on [x,y, x,y are relative coord. depending only svg viewBox
...
}
Any idea?
Thanks a lot!
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
I'm making a product site in Adobe Edge. I have a circle div that needs to grow in a span of, let's say, 2 seconds when mouseover. Then a text has to appear in it. When mouseout, the text must disappear and do the reverse animation back to normal size. The circle has also to grow from its center, not the top left corner. I'v been trying to do this for hours with jquery and css3 animations but failed to get a satisfying result.
This is very easy with edge animate.
make your circle element.
set a key frame at 00:00 on the timeline for the circles width and height.
press Q (the transform tool) or select the icon at the top left of the screen just to the right of the arrow.
The transform tool scales things based on the origin point, which is repositionable but is automatically in the center of the selected object.
go to 02:00 on the timeline.
resize your circle.
set a keyframe for your text at 0 opacity.
go forward on the timeline.
set another keyframe for your text at 100% opacity.
group the circle and text into a div.
right click on that div and press 'convert to symbol'.
go back to the stage by clicking 'stage' on the top left of the preview window.
select the object that you want to use to trigger the animation.
open the actions for that object.
paste the following code into a mouseover event: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").play();
now make a mouseout event and paste this code: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").playReverse();
now what should happen is that onMouseOver, the timeline for that symbol plays forward, and onMouseOut, the timeline for that symbol plays in reverse. This way, if the animation is half way through and they mouse out, it will reverse from where it's at back to the beginning.
Probably you would like also to use mouseenter/mouseleave events rather than mouseover/mouseout, if you will nest text div inside circle div.
http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.html
I have a Spark Group with an image inside and a label control.
<s:Group><mx:Image source="..."/><s:Label text="Hello!"/></s:Group>
The image is that of a speech bubble. I want to make the effect of it growing from bottom-right to full size.
How can I do this and make it that resizing the Group will also resize the children?
Thank you.
Group is Sprite, so it has scaleX and scaleY properties. Try setting these, but I don't guarantee anything (UI containers may control their scale coefficients).