When I try to rotate the dygraph by 90 degree, the mouse pointer gets out of sync and doesn't follow the highlighted point in the graph. I understand this is because now x - axis becomes vertical and y axis as horizontal but I don't know how to fix this issue. I tried pointing my own logic inside mousemove_ function of dygraph.js but couldn't make it work. Can someone please suggest me the code change I need to make.
Note: My app has both dynamic and static graph, so the mouse pointer should in sync with highlighted point for both static and dynamic graph
This came up in the dygraphs-users mailing list. See this thread: Best way to draw the graph vertically, particularly Ransom Christofferson's message.
Related
There are several physical bodies of different shapes on the screen. I want to click on the screen to get a physical body(if of course the click fell on it). I have no problems with converting the coordinates from the screen to the world and checking whether I hit the round collider(I just go through the list of "circles" and check the distance from the "click" to its center, if it is more than the radius, then skip). But I'm having problems with other shapes. I can't use raycast, as it doesn't detect the fixture inside which its starting point is. It seems to me that I'm missing some built-in solution that I didn't notice in the documentation. Advance thanks
I found an answer. World.QueryAABB
documentation pic
I would like to create some mouse interactions on several moving planes and for that, I need to know which planes I'm hovering on. I've implemented the Raycasting method like in your example here but it seems like I'm hovering all my planes in the center of the canvas, just like if the raycasting method wasn't considering my position.set() modifications.
You can see here an example of what I did here, I logged the result of the hits array at the end of the canvasSlider.js file and all planes are logging when hovering in the center.
Is there a way around that? Or I'm I doing something wrong? Thanks a lot.
The main issue is that you are setting the z scale to 0.
plane.scale.set(1, size.height/size.width, 0);
Replace the 0 with a 1 to enable the hit tests to function.
Another issue I noticed was that your mouse values are relative to the screen and not the canvas. As the canvas is on a scrolling page it may not be taking up the full screen at all times.
I wonder is it possible to exclude SVG element (like circle) only from zoom (scale) functionality and preserve his panning. For example: in map i point my current position with red filled circle. When user zoom, i want that this circle have a constant radius. When user pan - i want circle to pan with all other viewport content.
I found this solution:
Scale independent elements
But it seems that i can't figure out how to use it correctly with svg-pan-zoom library.
Also I wonder for similar task - is it possible to drag and drop some element? Mean just that element to be excluded from pan functionality? I was try some approach like jQuery draggable but with no luck.
Thank you
Well after a few weeks I've some kind of workaround. I use onZoom event handler of ariutta/svg-pan-zoom library and write a simple function like this:
onZoom=function(currZoom){
document.getElementById("marker").setAttribute("r", 2/currZoom);
}
In my case I have a little circle which represent current position. Now, when user zoom, library pass current zoom level as argument, and we divide him to radius and off we go!
Also i found a way to achieve my other question. Drag and drop is possible if we use enablePan / disablePan in corresponding mouse event on desired element. I can't post code example for now, because i still cant clarify how to calculate exact dX/dY to match to current zoom level, but that definitely work.
I am doing some math projects that require a lot of vector line art--that is a line drawn between to points with a circle at the start point and an arrow at the end point. A call to Math.atan2() keeps the arrow aligned. I call this class DrawVectorLineArt() and it creates instances of 2 other custom classes DrawArrow() and DrawCircle().
So far so good--DrawVectorLineArt() draws just what I need. Now I need to animate the vector art.
So in a function onEnterFrame I want to update the postion of arrow and circle, the objects created by DrawArrow() and DrawCircle(), respectively. I also need to clear and redraw the line drawn between them. At this point I am not sure how to proceed in an OOP framework. Do I need to create methods of my custorm class DrawVectorLineArt() to update the position of arrow and circle and subsequently clear and redraw the connecting line?
Any advice or links appreciated. Thanks!
"Do I need to create methods of my custorm class DrawVectorLineArt() to update the position of arrow and circle and subsequently clear and redraw the connecting line?"
Yes.
The arrow and the circle are very members of DrawVectorLineArt, and going by its name and choice of members, so should the line (if it's implemented through actual data). DrawVectorLineArt should contain and implement the whole animation between the circle, arrow, and line. As such, if the animation's supposed to be able to change after creation, the same instance of DrawVectorLineArt should be able to take any two legitimate points supplied to it (or that it becomes aware of internally, depending on what you're doing), reposition the three components, and turn the arrow and line appropriately, within its own code.
I'm trying to get a hover effect for displaying information against points on a line chart using gRaphael. I've got a basic version working here http://www.matthewhollings.co.uk/svg/raphael-line-test.html but there seems to be an offset against the point that the hover responds to when two lines are close together. Does anyone know how I can fix this so that each point responds when the mouse pointer is closest?
Also, I'm trying to make the line chart look more like the one on the raphael website, where the hover flag contains both the x and y value of the point and is animated along the path. Any help with that would be greatly appreciated!
Many thanks in advance,
Matt