Updating a line dynamically using SVG / Raphael - javascript

What I ultimately want to be able to do is to have a circle follow a path that is updated by a server real time. Think of it as a target following a line. I already know how to make a circle follow a path thanks to this fiddle. But my problems come from how to update the line and course of the circle dynamically as ultimately I want a target to follow data being generated by a server and I am not sure how to do it.
For ease of testing I have created a jsFiddle allowing you to click on the screen to place a point, with the aim of this simulating the server data. The circle shouldl then move towards each point in turn as you click it.
So how do I update an existing path and make the animation continue seamlessly without affecting previous parts of the path?

Related

Snap SVG: Connecting draggable shapes with lines (lines should keep being connected even after dragging )

I have reached a point where I think I need your help again. I have created 3 svg rectangles, and my goal is to be able to connect any two of those together, with a line. The thing is that my rectangles are draggable, and if two of them are connected, they need to stay connected. I have made a jsbin to test it:
https://jsbin.com/moxiyugovo/edit?html,js,console,output
The connection can be done by clicking the purple icon at the top, and then clicking once on the shapes you want to connect.
My problem is that in this way I can connect 2 shapes with a line, but when I want to make another connection, the previous line disappears. I am aware that this happens because I'm using the same var name (L) for every new line I create so they tend to overlap on top of each other. How can I differentiate those lines? Let's say I want to connect the 2 blue rectangles with each other, and the 2 red ones with each other, and keep it that way so that if any of them is dragged, the corresponding line point "follows" the shape. Thanks in advance for anyone who checks it out.
P.S. : The user is the one who needs to choose which shapes to connect, so pre-connecting them is not an option.
I found a way to do it, I used a global variable for a line even though it's not recommended. It is functional but I will need to edit this and make it better when I get some spare time. But for anyone interested in what I mean here's a bin:
https://jsbin.com/gudabijatu/edit?html,js,output

A scatterplot with links between points using d3?

I am trying to make a visualization using d3 which is basically a scatter plot with links between the points. (I have attached a .gif of the existing java based visualization)
The points can be added by double clicking other points. On hovering over a point, I wish to have links drawn between the point and all its partners on screen.
I have the part where on double clicking a node, its partners are added. What I need help with is drawing the links (primarily I am not able to understand how can I get the x1,y1,x2,y2 values required to draw the links).
This is what my DOM looks like:
I have seen a lot of examples online but somehow not able to figure the solution - if anyone could link me to a similar visualization or share a fiddle/ give some pointers on how this can be achieved I would be really grateful.
First the simple stuff: here are 2 mechanisms for drawing the lines.
Next, in terms of the data representation of the lines, check out how links are typically drawn when working with the force directed layout.
Important: Do not get distracted by the existence of the force layout in this example and by the fact that the force layout works with these links (which are passed into it by calling force.links(links)). That aspect of the example probably doesn't have an equivalent in what you're trying to achieve.
However, do notice how the links array is constructed —— with each element of the array being an object with pointers to source and target datums. In your case, you'll want to work with a similar links array, where source is the node under the mouse and target is a node that's connected to it. So you'll end up with an array of links who all have the same source datum but unique target datums.
You can then bind the links array (via the usual .data() method) to a d3 selection of line or path elements. Once you bind, you can use the usual enter, update, exit pattern to append, update and remove (on mouse out) the drawn lines.
Given a source and target datums, you can calculate the x and y of the endpoints in the same way you currently calculate the translation of each <g> element, presumably using a d3 scale.

How to Remove Previously Drawn InfoVis Space Tree

I am using InfoVis to generate a space tree visualization in one of my projects. Since this is an interactive web site, the Space Tree needs to be regenerated each and every time the user has changed preferences.
This requires the Space Tree to be completely cleared and re-draw a new tree on the same space. In addition, the charting area can be re sized as the page size varies. This requires re-draw of the Space Tree.
I came across several issues while trying to clear the previously drawn Space Tree before drawing the new one. I am using the following code segment to clear the previous drawing, but it's failing miserably.
st.clearNodesInPath();
st.labels.clearLabels(true);
st.canvas.clear();
If anyone can guide me how to resolve this that would be great as this is blocking my progress. Thanks in advance.
This was resolved in the following manner.
The InfoVis chart draws it's elements as HTML div elements inside the parent element. The problem was due to remainings of those generated div elements even after clearing up the data structures. Those were clearly shown in the previously attached images.
This was resolved in the following manner.
var list = document.getElementById("idOfParentElement");
list.removeChild(list.childNodes[0]);
The code fragment extracts the parent InfoVis element and clears up all of it's generated child elements. This will eventually clears the canvas object where the visualization will be drawn.
This resolved my issue. Hope this helps for anyone who is having the same issue.

d3: collapsible treee by mbostock - how to add new paths?

Please see
http://bl.ocks.org/mbostock/4339083
I want to add code so that when the user presses mouse down on one node and releases mouseup on another, it should draw a curved link from the first node to the second. I have added code to handle mousedown and mouseup events on nodes and storing mousedown_node and mouseup_node.
But I do not know how to do the following:-
What code to write to draw link?
How to make sure that the link is curved so that it does not cut any other node in between. (it is ok if it cuts other links). As an example, suppose the user drags from analytics to data. If the link is straight, then it will cut animate in between. That is why I want curved links. Any curved link is fine so long it does not cut any other node in between.
How to put arrow head at the end of the link?
I saw some other examples in which links are added. But somehow I am not able to do so in this sample.
Thank you.

putting d3.js elements on the slider

Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing
Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange, circle, square, triangle so that user can move them with arrow buttons shown in the image.
I just wanted to know if it is possible with d3.js and if Yes, please tell me how or from where to start?
You could make something like that using D3.
One way you could do it is to draw the tiles as rectangles using SVG and then have a clip path that hides the tiles that are outside of the frame of what you want to see. The left and right arrows would update the xScale domain which would slide the tiles left and right. And, you can register click events on the rect elements to create links on the tiles.
See this for some ideas on how to start: http://bl.ocks.org/mbostock/1667367
If you aren't already somewhat familiar with d3, you should probably start with a basic tutorial like: http://mbostock.github.io/d3/tutorial/bar-1.html before you dive into the deep end.

Categories

Resources