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
Related
As user moves mouse cursor near the strokes of svg path I would like to display a circle on a stroke at the point closest to current mouse point. The only solution comes to mind is to manually parse SVG data and find closest point checking all segments of the path. Implementation of this is quite involving and potentially too slow.
I could draw transparent stroke on top of current stroke with larger width and use SVG hit testing capabilities to detect that point is close to the stroke but is there any way to determine corresponding 'central' point of the stroke?
Interesting, but too involving problem to be solved here.
You will probably need to do some calculations on your own. You might find method getPointAtLength to be useful. If you are comfortable of using some library like D3, you can find some helping functions there as well. I think very good approach to solve this is to segment your path and use Voronoi tessellation. You can find the code and demo here:
https://bl.ocks.org/mbostock/8027835
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 am 2 very different path and I'd like to smoothly change one to make it look like the other one. I have tried using the .transition() method applied on the "d" attribute but it gives very poor results.
Here is an example:
http://jsfiddle.net/yya0m0s0/1/
The d3 code I used is the following:
var svg = d3.select("body")
.append('svg')
.attr('width', '375px')
.attr('height', '490px');
svg.append('path').attr('d', d_t0);
svg.selectAll('path').transition()
.duration(3500).delay(1000)
.attr('d', d);
What is the best way to create the kind of transformations?
Many thanks
The problem here is that your first path only has 10 segments, and your second has 42 segments. The paths are so different that transitioning between them using the built-in path tweening is impossible.
D3 does a good job of tweening two paths that are similar in structure (same number of segments, and the same types of segments). Things start to get messier the more different the structures are.
Consider this example.
The first two path data d_1 and d_2 have the same number and type of segments, only the endpoints change. The transition between these is seamless.
The second two path data d_3 and d_4 have the same number of segments, but the final segment is a different type (line in d_3, quadratic curve in d_4). The transition is fine for all the points up to the last point, but then the final segment shows the same sort of jumpiness that you experienced in your example. This is because a quadratic curve requires a control-point, which must materialize out of thin air when the transition begins, causing the jump.
The bad news is that the only way around this problem is to create a custom tween function for your path data attribute. The good news is that this is a common issue and smart people have come up with solid solutions.
HERE is a good path tween function that Mike Bostock created.
When implemented on your example it gives a fairly smooth result: JSFiddle
Hope that helps.
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():
I am trying to create a pie chart and am customizing the example here: http://raphaeljs.com/pie.html
I need to draw lines from the labels to the slices but IE is giving me trouble and I'm not sure what to do about overlapping lines and labels.
Has anyone done this before?
this maybe useful to you:
Overlapping issues can usually be solved by using:
a) ".toFront()" on the raphael element, that should appear in foreground
b) ".getBBox()" at your label and use its parameters to figure out the starting point.
those functions can be looked up in the raphaeljs reference.
.getBBox() should be a good way to start, when you try to connect elements. you can easily figure out its meassurements and use those values (x,y,width,height) to calculate the entry point of your path
that makes it easier to avoid any overlapping at all. but keep in mind the end SVG elements are directly placed within the dom and therefor are meant to work in layers.
overlapping / partially hiding elements often offer you a great animation potential and are not really a bad thing to work with.