I'm aiming to create an interactive SVG like the following:
https://codepen.io/iamandrea/pen/rNjPemO
Basically, I want to load an SVG and allow the user to click and modify the paths.
This example uses Two.Js, however, and I'm having trouble translating this to React. After doing some research, I'm not sure if it's the best library to combine for this task.
I was wondering if anyone knew a library that could do something similar? Otherwise, if there's a technique to gather onClick data from an SVG anchor point, that way I can make my own. All I can find so far is how to click an entire SVG rather than the anchors.
jQuery(function($){
$('path').click(function(){
this.style.fill = "#"+colors[i++%colors.length];
});
Sorry that I don't have any other code to show, I've been searching for answers all day and haven't found anything.
Appreciate any help in advance :)
Related
It is possible to customise nodes on a ThreeForceGraph, using APIs provided at https://github.com/vasturiano/three-forcegraph, using the method ThreeForceGraph.nodeThreeObject(...). The ... here can be a THREE.Sprite instance, and we can render any svg picture to THREE.Sprite.
However, I wish to have something more than a picture. I wish to add two clickable buttons to each node of the graph. I can do Sprite.addEventListener(...) to detect mouse click, but this is not quite the same as a button. It would be really nice if I can make each node on the graph into a React component (that would be the ideal situation).
After looking around, I haven't found any ways to implement this. Is there any ways to achieve what I described? (Of course, it does not need to be a method of Three.js.) Any examples/references are greatly appreciated.
Let's say that we have the following image:
I'm thinking of drawing this image with all the possible connections and then position some labels on their correspondent arrow... but this may not be the best approach, because the position of each label would be different depending on screen resolution. What do you think about this approach?
My question is: anyone knows any JavaScript library, jQuery plugin capable of drawing something like the image above? I mean, capable of doing multiple connections and that could be implemented with AngularJS ?
Here are some new details:
After I make some tests with JointJS, I think it is what I need, but...
the following link is an example of JointJS with a demo of connections/links between sources and targets that I would have on this project... The thing is: as you can see on this demo has alot of links and it's hard to interpret. Can anyone help me on how to make this look better? There's a better way of representing this? (on this example the link's are static but they would be done on a dynamically way).
You can check out below urls:
JSPlumb provides a means for a developer to visually connect elements on their web page
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://jsplumbtoolkit.com/demo/home/jquery.html
Wirekit looks good for creating custom wired flows:
http://neyric.github.com/wireit/
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
http://www.jointjs.com/
Here is a nice angular library
https://github.com/codecapers/AngularJS-FlowChart
and an example of it in action
https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this
is a syntax tree, and this is the general way I want it to be displayed.
How do I build something like this with HTML and CSS?
edit: Solution
Just in case somebody who finds this question later is trying the same, here's what I did:
I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.
The result can be seen here.
Try d3, it has a really good tree visualization
Another option is ArborJs, you can find an introduction here
I am planning on making an analytics dashboard and would like to implement circular charts like the image attached to this question:
and I would like to do it using jQuery. Do you guys have any usefull links to resources or to other SO questions? Would be awesome!
Thanks!
You can also take a look at :
http://bernii.github.com/gauge.js/
http://www.justgage.com/
Both of them look really good and seems pretty easy to use.
The easiest way would probably be to create an SVG that mimics the appearance you want, and then use JavaScript/jQuery to modify the source of the SVG. The design you're requesting could probably be acheived by simply placing two arcs on top of one another.
Deriving from this excellent answer on calculating arcs, creating two overlapping ones could look something like this, which also demonstrates updating the arc dynamically.
lethargicpanda's suggestions are cool. Check out jQuery Knob too. It also allows user input.