anvaka / vivagraphjs Goto Github PK
View Code? Open in Web Editor NEWGraph drawing library for JavaScript
License: Other
Graph drawing library for JavaScript
License: Other
Hello,
I am following the example svg 06, it's excellent but I just want the font size of the nodes smaller. How can I control that?
Thanks to everyone.
I am trying to use constant layout to specify node placement myself. I also want to dynamically add or remove nodes/edges in the graph periodically. I am getting two types of errors while doing this.
Any help please!
Based on the forEachLinkedNode
method in core/graph.js the code below would give the "unlinked" nodes for a given node. But not sure about if the underscore method _.difference
would work in VivaGraphJS?
First of all, you made a very nice library to work with graphs. I also experienced with d3, but this library is much more easy. Well done!
I'm working on a project where we have more than one networks in a graph. When that happens the networks drifting away out of sight.
What I tried is turned off the gravity to 0. The graphs are standing still, but when you move a node the nodes act "dead" as expected.
Are there better options I can use?
Hello, Great job for VivaGraphJS.
I know that can be fixed the position of all nodes but can be fixed only two and leave others free?
Best regards.
var graphics = Viva.Graph.View.svgGraphics();
graphics.node(function(node){
var text = Viva.Graph.svg('text')
.attr('text-anchor', 'middle')
.attr('stroke','green')
.attr('font-size', 24)
.text('Jason')
var label = Viva.Graph.svg('rect')
.attr('stroke-width', 10)
//.attr('stroke', 'red')
.attr('width', 24)
.attr('height', 24)
label.append(text);
return label;
});
var renderer = Viva.Graph.View.renderer(g,{
graphics : graphics
});
above is my code, but i am not getting any text to show
First off, great piece of software.
It would be nice to add some stabilization parameter, so that it stops calculating the force directed layout. Perhaps it restarts if a node is moved, then stops again when it stabilizes. Problem is.. if you leave the graph open in a browser tab, it continues to consume CPU. My box is almost currently flat lined as it continues to process a layout that's stable.
Admittedly, I haven't looked to see if I can put a cap on the iterations, so this may just be my fault. :)
I try to put the graph into a div with assigned height and width. The graph displays as expected in Chrome but fails in Firefox. In FF, the graph is covered by something and can only be displayed in a limited area.
I use the sample "02 - Create Custom Node.html", and assign the div "netgraph" as a container to the render.
The css code is like:
#netgraph {
height: 400px;
width: 600px;
}
and the JS code is:
var renderer = Viva.Graph.View.renderer(graph, {
graphics: graphics,
container: document.getElementById("netgraph")
});
In Chrome, the graph could be been in the center of the container while in Firefox it can't only if I drag the graph to the upper space of the container. It seems like the displaying area is smaller than the assigned size. Very weird.
Any suggestion is appreciated.
Hi. Thanks for your great work. VivaGraphJS had given me a lot of help to visualize social network while in my case the renren.com ( a copycat of facebook in China ).
I'm working on visualizing a person's social network, and I had got this: see in https://plus.google.com/photos/115061167724184765958/albums/5875271993379171409/5875271989997421938
The layout of the network is very terrible. Do you have any suggestion to improve the layout?
Hello!
I create a graph with arrows. When test it in IE 10 I have problem.
The arrow is positioned in the middle of the edges.
I was thinking it was my mistake but I'm testing the demo ( 05 - Edges With Arrows.html ) and I have the same problem.
Any idea?
Thanks
I can do it in svg-mode, but this is way too slow
Is it possible to display the graph only partially, or select a partial graph and display its nodes with different color?
Is it possible to display directed graphs with vivagraph?
Can you please tell me how the zoom in and zoom out is working in this code.
Hi,
I would like to develop an iso-morphic interface to represent a graph.
Basically I would like to exploit the fact that all nodes and links of a session are already contained within the viva.graph.graph object, keeping the session active and reducing the time to download external JS libraries if it was the case.
I don't want to display a force-directed layout.
I just want to access the nodes and links information, without calculating at all their positions.
It is like if I am retrieving data information "hiddenly".
I tried to play around, and I found out that it is the renderer.run() function which actually let all the other code be executed.
That is, no renderer, no "graph" initialization.
var renderer = Viva.Graph.View.renderer(graph, {
container : document.getElementById('graph1')
//layout : layout,
//graphics : svgGraphics,
//prerender: 20,
//renderLinks : true
});
renderer.run(500) // if i remove this, no graph is constructed and no data is pulled
How could I use the graph object of Viva graph to get the nodes and links, but detach the rendered graph layout ?
renderer require a layout, so I wonder if I need to create a layout and pass it to Viva (which means putting my hands deeply into the library but my skills are definately not there)
Smtg simple like calling teh graph objects as:
graph.nodes()
graph.links()
Any suggestion?
Hello!
so I've been playing around pretty much so far.
I've learnt how to use this amazing library and I am building a whole interface with it.
I maybe add to many features (and true, I've got still to optimize )
and indeed it is time to optimize:
I found google renderer consumes 98% of CPU when opening large graphs.
Probably because of the settings of the spring.
Or probably because labels are also split in multiple lines... i don't know yet
(please advice on how to debug efficiently)
Below, I'll post my settings for the spring-force layout.
Could you please elaborate more on how much each parameters is affecting on computation?
Alternatively, how to build a button that stop the computation and freeze the graph, and than if clicked again keeps on relaxing it?
tks for the advice and sharing of ideas!
this settings are the one i found to let graph relax smoothly.. pleae share also your ideas folks!
springLength : 270,
//springCoeff : 0.00055,
//springCoeff : 0.0000055,
springCoeff : 0.00001,
//dragCoeff : 0.09,
//dragCoeff : 0.01,
dragCoeff : 0.005,
//gravity : -1,
//gravity : -2.5,
gravity : -1.5
Hello everybody!
I need to get width of text box of the svg text which is created with
svgText = Viva.Graph.svg('text')
.attr('y', -nodeSize)
.attr('text-anchor','middle')
.attr('x',nodeSize/2)
.attr('width',nodeSize*2)
.text(node.data.name')
I tried with
var bbox = svgText.getBBox();
var bboxwidth = bbox.width;
var bboxheight = bbox.height;
but I get the value is 0..
console.log('size ' + svgText.getBBox().width);
Do you have the same results or is it my code which has smtg awkward?
Thank you 4 sharing!
I'm trying to change the constant layout option to a circular layout which doesn't care about the number of crosses and just arranges the nodes in the form of a circle. The algo I'm using is:
var r = Math.min(this.width, this.height) / 2;
/* Where to start the circle. */
var dx = this.width / 2;
var dy = this.height / 2;
/* Calculate the step so that the vertices are equally apart. _/
var step = 2_Math.PI / graph.vertexCount;
var t = 0; // Start at "angle" 0.
for (var i = 0; i<graph.vertices.length; i++) {
var v = graph.vertices[i];
v.x = Math.round(r_Math.cos(t) + dx);
v.y = Math.round(r_Math.sin(t) + dy);
t = t + step;
}
I'm not able to figure out how to incorporate the algo into Viva so as to make it a circular layout. Any help is appreciated. :)
I am trying to implement search functionality, When somebody search a node, it will come into center.
I was trying it with translaterel function.
But i am not figure out what should be the value of offsetxXand offsetY so that particular node comes in center.
In most of viva-graph classes there are some operations and variables in the beginning and than a return statement that returns a huge object.
The problem with that approach is that it makes vivagraph completely unextendable, you have to rewrite the whole module if you want just to override one or several methods =((
I suggest to use normal classes in vivagraph. So developers will be able to do something like:
class MyCustom graph extends VivaGraph.Graph
someMethodToOverride: ->
super
somecustomcode()
I'm not able to use pictures in a webGL force directed graph I made.
My graph is over 1,000 nodes, so I can't really use another rendering method.
Is it possible or do you have plan to add this feature?
When trying to render 10000 nodes it takes much of time for making the nodes apart. How to make it render fast?
When I iterate over nodes I do not get all of them, here is a gist https://gist.github.com/antonkulaga/5532205 showing this problem.
Hi,
I am trying to understand the library and webgl. I would like to display node text attributes on mouse over event, in webgl.
The use case would be that : user put the mouse cursor on a node, the text attribute of a node appear over it. The text disappear as the cursor is no longer on the node.
How can i have access to the canvas and its context ?
Can i use the fillText function to draw the text ?
Thanks
I am trying to render the Graph inside a div. Not able to figure it out.
How to put the graph in the div?
I enabled webgl support on my iOS browser and got it running but there seems to be a clear missing between drawing frames. Do you have any idea on how to solve that?
The app is running here: http://neo4waza.herokuapp.com
Thanks a lot
(Would you perhaps available for some paid support for vivagraphjs? We have to get this done by Thursday)
Hello,
testing a graph on iphone 5.
The graph open, but I can't interact with a node and zoom is not working, while it works in yasiv.com
Any idea for integrating gestures functions/interactivity for touch events?
What would you suggest?
Applying jquery mobile functions?
Also any idea for improving performance and making the animation smoother?
(I tried with parameters in layout, but I haven't found a good result for mobiles)
thank you!
Hi, how to use the removeLink(link) function?
removeNode(nodeId) works well cause nodes have Ids.
But how to identify a link?
I thought by startId, endId as parameters of nodeId, but it takes one entry only.
so these won't work
graph.removeLink(graph.hasLink(1,18433))
graph.removeLink(1,18433)
graph.removeLink()
...
thank you!
Zoom in zoom out feature using mouse wheel is not working on Internet explorer.
You have some very powerful examples in your links (YouTube, Amazon, etc) that includes some great features such as mouseover (showing labels, highlighting links), directional arrows on the links, etc. However, I don't see how to implement any of these features in the documentation or the examples given in the code. I'm trying to view the source of those example pages and figure it out, but it would be nice to break down some of these in the example code folder or the Wiki.
Thanks, Jeff
I'm trying to use betweenness centrality to arrange a force-directed graph so that nodes with highest centrality are placed more centrally, but I can't work out quite how to call Viva.Graph.centrality.
Is there an example somewhere I can crib from? If so, could it be added to the demos folder?
I want to render the nodes in different order, I want to change their position according to me.
Can you tell me how can i do it.
I have a problem with clearing and loading all nodes again.
This is the sequence that i use to clear the nodes
graph.clear();//remove all nodes
loadAllNodes(); This will perform an ajax call that will load the nodes and then run renderer.run() at the completion of the call
Within the loadAllNodes i used graph.beginUpdate(); and graph.endUpdate() to addNode and addLink
There will be an error TypeError: toNode.position is undefined.
What should the correct sequence be for clearing all nodes and reloading them?
Do i need to pause the renderer?
Thanks, I will try to submit a jsfiddle with the probelm
I have system where multiple type of node are present and these nodes can have different status( active, inactive or others) . Is it possible to store this information in a node instance. I am using the node type for link. I want to display different images based on the statues of the node.
Is there a method that we can get the zoom level from Viva.Graph or something. I need to use it so that text size stay appropriate while zooming in and out. Thanks.
First of all, Excellent Work!
I'm using this library to discover network of devices (router and servers), and I would like to add functionality that clicking a node would expand/collapse childrens.
How this can be done? I've see similar functionality in D3.js, check this out:
http://bl.ocks.org/mbostock/1062288
Thanks,
Andrea.
I am aware of those examples showing arrow heads with some extra code. But it will be great to have a property in the edge configuration that allows us to add arrow heads on both the ends, one end or none (by default?).
Not sure how to do a couple things.. thought you might be able to clarify.
Trying put a border around the images. Something like this...
padding:1px;
border:1px solid #021a40;
Tried to place it in the ".node " class, no luck. Tried to set it in the ".attr('border', "1px solid #021a40")" of the "Viva.Graph.svg('image')", no luck. So not sure how to customize that...
Another thing.. I can easily specify the size of the image in the data as an attrib.
graph.addNode('anvaka', {url : 'https://secure.gravatar.com/avatar/91bad8ceeec43ae303790f8fe238164b', size: "24"});
Then I can specify this in the node, which allows me to specify some images larger than others.
.attr('width', node.data.size)
However, I can't center them the same way...
nodeUI.attr('x', pos.x - 12).attr('y', pos.y - 12);
Would be nice to be able to grab the size of the image and divide by 2 here.
После авторизация сразу не заработало - был вывод страницы авторизация. При нажатии на вход - окно открывалось и мгновенно закрывалось. Помог сброс кук и повторный вход на сайте вк.
Chrome 19.0.1084.52 m
I can't find a way to dynamically show my graph that changes every 5 seconds or so. I did try using the setInterval function but it just renders more and more graphs which doesn't solve my issue. Is there any way I can get over this?
How would be possible having a Tree-like layout?
Something like this:
http://mbostock.github.com/d3/talk/20111018/tree.html
Thanks,
Andrea.
Hello!
I want to decorate nodes with images, and position the label of my nodes at the bottom of images.
The images I get can be different in size.
I would like to than pass the image Width, height to the svg node, once I get the source url of img; than pass this value to the svg tag (at least, this is what I've learnt here:
http://stackoverflow.com/questions/6884513/how-to-get-the-real-unscaled-size-of-an-embedded-image-in-the-svg-document
http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome
I am using indeed the solution above, but I noticed that with the method described at
http://stackoverflow.com/questions/6884513/how-to-get-the-real-unscaled-size-of-an-embedded-image-in-the-svg-document
sometimes images cannot load in time:
it is like i should wait to load for them, and then attach them.
This behavior does not happen when getting the src Img directly with
ui.append('svg')
.link(srcIMG).
Is there something I am mismatching or doing wrong?
Also, is there the possibility to apply the loaded image directly on svg ?
I think I am loading twice the same image ...
Here's my method I would like to discuss with you!
svgGraphics.node(function(node){
// This time it's a group of elements:http://www.w3.org/TR/SVG/struct.html#Groups
var groupId = node.data.group;
// set img dimensions
var imgCover = new Image();
var imgLink = node.data.linkOfTheImg;
imgCover.src = imgLink;
var imgW = imgLink.width, imgH=imgLink.height;
//then
img = Viva.Graph.svg('image')
.attr('width', imgW)
.attr('height', imgH);
//decorate svg
ui.append('defs')
.append('pattern')
.attr('id','nodeImg')
.attr('patternUnits','userSpaceOnUse')
.attr('x',nodeSize/2-imgW/2+'px')
.attr('y',nodeSize/2-imgH/2+'px')
.attr('width',imgW)
.attr('height',imgH)
.append(img);
//apply img
ui.append('rect').
.attr('fill','url(#nodeImg)')
}
I looked at the source code and saw, that there is a variable for storing changes inside the graph core. But t is not reachable and sometimes I even get errors like "update change is not implemented).
My current use case is collaborative graph editing by several users. I use websockets for push notifications and I have a representation of graph on my backend. So what I need is to synch changes between them. If the user updated/added/deleted some nodes on clientside this info must be send to the server it will update the backend graph representation and sends notifications to other users who are viewing the graph to update their vivgraphs.
So I need to figure out how to do this synchronization and how to overcome above-named problems.
Hi Andrei,
Is it possible to change the link color when mouse enter node in webgl ?
Thanks
I want to stop the initial movement of graph,When Graph is starting loading.
It pushes all the nodes away. I want to depict the graph static after load and also no movement during load time.
How it can be achieved?
Hi, I noticed that links created as g.addLink('a','b',data) are different from ('b','a',data).
Is there a native function to compare the links within
g.getLinks(a), and if there are links present, avoid to create new ones which are equivalent?
With nodes I was able to overcome with a solution like writing all the IDs of nodes within an array, and then check with IndexOf() to see if there are already present or not.
But withj links it is different, since I should check within an array of objects, and I am stacked.
I am looking at
http://stackoverflow.com/questions/2218999/remove-duplicates-from-an-array-of-objects-in-javascript
and similar but could make a solution work yet.
Any idea?
I am not able to figure out how to get event detected when someone clicks on the Edge or hover over the edge.
Is there any way of adding a list of links? Right now one must call addLink N times.
Instead of:
graph.addLink(0, 1);
graph.addLink(0, 2);
graph.addLink(1, 3);
graph.addLink(2, 1);
graph.addLink(2, 4);
graph.addLink(3, 2);
graph.addLink(4, 0);
This:
graph.addLinkBatch([[0, 1], [0, 2], [1, 3], [2, 1], [2, 4], [3, 2], [4, 0]])
Is it possible to set each node gravity differently?
i want it style like a tree. For example, top node will be less gravity, children will have more gravity
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.