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.
Related
I've developed an application to support drawing something like lines or points and adding some tags on the map using OpenLayers 3.
Many existing functions in OL3 enable me to draw and modify something.
But, when I select something I drew, I felt the need of a snapping function to make me select them more easily.
Unfortunately, current OL3 supports the snapping only for the drawing and modifying, like below:
var draw = ol.interaction.Draw({features: some_features});
var snap = ol.interaction.Snap({featrues: some_features});
map.addInteraction(draw);
map.addInteraction(snap);
Actually, I found that the snapping works by replacing ol.interaction.Draw to ol.interaction.Select, because I can select something I draw if I clicked points apart of them. But, the mouse pointer did not snap to them.
So, How can I implement select interaction with snapping function in OL3?
Added some codes to explain details.
See the link: https://jsfiddle.net/keltpower0/sej6z2q4/1/
After you draw some lines, you should click the very point where lines are placed if you select those lines.
I want to more easily select those lines with snapping function, like, if I move the mouse pointer near lines, the pointer "automatically" snap to the lines
Select with snapping sounds a bit weird to me. What about using the hitTolerance option of the select interaction ?
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
I'm building a canvas paint tool where the use simply drags his mouse to draw on the canvas. As I understand it lines is the best way for the job. So on mouse down I create a KineticJS Line object and when the user drags I add a point between the last mouse position and the current. Note, I only have one line object that has multiple points.
When the user releases his mouse the Line is finished and whenever you click again to draw more, I create a new line object.
Problem with this is that if you are going to draw a text, say "My name is x" That would result in many line objects, 1 for each character (and 2 for "x" and "i").
Is there a better way to do this? My idea was to have only one line object, and onmousedown you simply not add a line from the previous position, and then when u drag you do. But I don't think KineticJS Line supports that.
So basically, can I improve the way I let the user draw?
Your current design of having 1-2 polylines that define one letter is fine.
Both canvas and Kinetic can support a whole paragraph of characters before lagging in performance.
If you want 1 single definition for a whole sentence, you can use a custom Kinetic.Shape.
With Shape, you get full access to a wrapped canvas context. You could use that context to do your second idea--a single context.path drawing a sentence through a saved set of moveTo and lineTo commands.
Personally I would go with your current design (1-2 polylines per character) because the performance is fine and you get more flexibility. (For example, if you want to draw the person's name in a different color is easier in your current design).
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.
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?