I'd like to move a circle along a path using d3.js. I used the code from Mike Bostocks' website here:
http://bl.ocks.org/KoGor/8162640
I'd like to move my circle at a constant speed along the path and have it moving immediately after it has been added to my svg. I cannot see how to twist the code here to make it work.
Does anybody have an idea how to do this?
Best
You should just add a line
.ease("linear")
after .duration(7500), and you should be all set.
This is documentation on ease(), but you should read all that is related to transitions, while you ate at it...
Here is also a test example for various possibilities related to ease():
Related
I'm using the Victory library to draw a line chart in React, but it seems to draw lines with different widths depending on whether the line is straight or is at an angle.
Screenshot of the line it's drawing:
In the screenshot, the dots are drawn using VictoryScatter and the line(s) using VictoryLine. I noticed that VictoryLine draws using path, so is this a limitation of SVG's path to draw like this? Because this seems weird to me!
This is happening because of the order or rendering of the SVG components. The ones at the top and the bottom appear to be thinner because they are rendered behind the axes (this is explained here)
I'm not sure why, but changing the order didn't work for me, so I had to use VictoryPortal to bring my components to the front.
I have a maps of different countries. I want to transition every countries to another path (typically a rectangle or a circle).
If I do a classic transition, the transition is akward, as the SVG does not have the same number of nodes. I use a library (polymorph.js). This library ensures that the destination path has the same number of nodes. Sadly there are some artfacts ( circles are not really circle, and rectangles are a bit weird).
Example : http://bl.ocks.org/ufenegga/7302cdde0fd2b6814dda
I am looking for an algorithm that allows to transition nicely between the country path and a circle/rect
Can anybody help ?
Thanks
I find a working solution here : https://gist.github.com/ge045/2e7de433f1d1d5948bbd/revisions
If somebody can explains what is going on, so i'll be sure to understand how it works
I need to be able to draw links between the circles in a circle pack layout, like {source: i, target: j}. I've seen some questions about how to combine this layout with the force layout that made me think It could be a way to achieve this but I haven't had any luck on that path, also what I need is something completely static. Thank you in advance for any suggestions.
I finally could draw lines between nodes by appending them to the svg and calculating each line position based on the radius of the nodes that each line were to connect, but the problem was that the pack layout that I'm using is zoomable, so when I tried to zoom by clicking the lines neither translate nor re-sized (of course, since there was no code performing such things), so I tried to implement a translation function for the lines so they would move along with the zoom, then I saw that it would take some serious geometry to achieve this, so since I'm a lazy programmer and not at all experienced with d3 I tried to come with something more simple... at last I decided to represent the links between the nodes with a different approach (without lines), I used the "mouseover" event so when the pointer is over a node it will highlight (changed circle stroke attribute color and width) the nodes connected to it. This way I achieved my goal and the view looks a lot cleaner without all the lines crossing over it (they were a lot). I know that some may think that this does not answer the original question, and I'm sure that this can be achieved by someone with more experience (and time and patience) using lines and implementing the right calculation, but in my case this solution solves my problem and maybe it could be of help to others.
I have spent quite a bit of time going between snap.svg and jquery.svg trying to work out how to animate the following:
An arrow that draws but leavs it's tail trail behind it
Arrow has 90 degree bends but is on a curve
So I got the path animation worked out, well for a circle and line with a bend in it so far. But the arrow that moves and leaves the trail behind it is prooving problematic (tail is thinner than arrow head). jQuery SVG allows me to not clear the canvas so to speak and thus I can create the trail however it's Snap.animate I have worked out to use for animating along a path.
So question is out to the world.
Q1. Which is best to use? snap.svg or jquery.svg
Q2. Any ideas on how to achieve my animation would be much appreciated.
Thanks
Darcey
For me the solution was:
snap.svg
I checked out many solutions for path animation etc but found that:
Animation of a dashes line for a path worked for line reveal
Animation along the path for arrow head
Taking path data from SVG files and placing them into variables in javascript made things easier as animation wouldn't work on loaded svg, im sure there is a simple fix / solution for that but the js var data worked. so I went with it.
D
I'm using the radial tree example from d3.js (tree-radial.js) and when you click on a node it should move to the center (set it as the new root). I want to get a smooth transition from one tree structure to another but I can't get it to work at all. The click is recognized but I'm not sure how to transition the nodes. Can somebody explain me the steps to get this work or link a short example where this is done?
I don't know if this helps, but you can have a look at this: http://bl.ocks.org/1249394. The clicked node doesn't move to the center in this example, but in essence you will still need to make some similar transitions, just that you will have to adjust the position of the node to be in the center (slightly different coordinates for the transform).