Stack Overflow
Stack Overflow

Questions tagged [webcola]

WebCola is a JavaScript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries.

WebCola is a JavaScript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries.

Use this tag for questions pertaining to usage of WebCola libraries such as this implementation (on GitHub).

28 questions
7
votes
1 answer

Dynamically adding nodes to Cytoscape

My company is building a graph-view editor for chatbots. We are using Cytoscape along with the cytoscape-cola extension to accomplish this. One of the issues we are facing is dynamically adding new nodes to the graph without them overlapping with…
iAMdifferent
  • 73
  • 7
5
votes
1 answer

New layout after opening a group not base on the last layout with cola.js

I recently learned about a excellent JS library cola.js . It can do a force layout and support groups. Learn more here : Cola.js I create a simple demo to show a force layout with opening group feature. But I was confused with the openning…
Does
  • 569
  • 6
  • 24
5
votes
1 answer

Layout with hierarchical grouping Cola.js a.type not a function?

Heading ##Trying to get cola.js "Layout with hierarchical grouping" Set up. Trying to create the following in my browser: http://marvl.infotech.monash.edu/webcola/examples/gridifiedSmallGroups.html I get the error: d[a.type] is not a…
Kenneth W Larsen
  • 51
  • 3
4
votes
0 answers

How to fix a node on its side parent group holder in cola.js?

So Cola.JS is beautiful but I wonder how to have a node that (via some attribute for example) stick to right side of its parent group holder? Like nodes 26 27 28 here (a picture of what I would like to have):
DuckQueen
  • 772
  • 10
  • 62
  • 134
3
votes
1 answer

How do you pass nodes to gapInequalities in cytoscape-cola.js?

The cytoscape.js-cola documentation for the gapInequalities element of a layout dictionary says: gapInequalities: undefined, // list of inequality constraints for the gap between the nodes, // e.g. [{"axis":"y",…
Ben Kovitz
  • 4,920
  • 1
  • 22
  • 50
3
votes
2 answers

How to entirely remove a d3 forceSimulation and its drag handers

I want to allow users to view their network using either a d3 forceSimulation or a CoLa layout, which means when a user fires an event, I need to change out which of those layout algorithms is updating the x and y attributes of my nodes and…
Alex Lenail
  • 12,992
  • 10
  • 47
  • 79
3
votes
1 answer

How do I configure graph to show downward pointing edges without hardcoding node positions?

I am trying to achieve this effect using cytoscape.js and the cytoscope-cola.js extension. I want to make the edges of my graph direct downwards like in this picture: Instead of the unconstrained graph that shows up by default. I'm using the cola…
Louis93
  • 3,843
  • 8
  • 48
  • 94
3
votes
1 answer

WebCola Missing documentation

I'm trying to use WebCola http://marvl.infotech.monash.edu/webcola/ but I can't find a link to the real documentation. The website seems to have only a few examples and some (apparently) auto-generated docs which are not really useful for anything…
Okonomiyaki3000
  • 3,628
  • 23
  • 23
2
votes
1 answer

D3.js - Directed Acyclic Graph : how to rearrange the nodes and edges to avoid intersection of edges

I have to create the nodes and edges, having interconnections. I am using d3 js for the same. Now the problem is that the graphs look so much messy. I tried using quadratic bezier curves to draw the edges between the nodes. I want that If a press a…
GA23
  • 21
  • 2
2
votes
0 answers

When cola.js fails, what's a fast way to find out what went wrong?

When cola.js fails, how do you find out what went wrong? I don't have a minimal reproducible example, because that will likely take hours of debugging to make, and if I had it, then it wouldn't be an example of what I'm asking about. I'm hoping to…
Ben Kovitz
  • 4,920
  • 1
  • 22
  • 50
2
votes
2 answers

How to avoid marker and node overlaping in cola.js / d3.js

i am working around a cola.js example enter link description here and i added markers (arrows) a the end of the links. However, since the nodes are rectangular are overlaping the arrows. I tried to fix it by changing 'refX' of marker but is not…
galatia
  • 473
  • 1
  • 5
  • 18
2
votes
0 answers

Cyotoscape.js cola extension similar to cola example

I am using cytoscape.js and the cola extension and I am interested in creating a layout similar to. this example I would like the neighbours open smoothly like in the example. Please have look my codepen when i expand the node layout.run() is…
Tamer
  • 91
  • 2
  • 10
2
votes
2 answers

Force directed Cola layout with Cytoscape similar to Cola example

I am using cytoscape.js and the cola extension and I am interested in creating a layout similar to this example. There is an example of using cola with cytoscape.js on the website, but they do not have this non-overlapping functionality. I tried the…
kamranjon
  • 53
  • 4
2
votes
1 answer

Why D3 events that deal AngularJS models does not have effect in binding?

Consider the following controller of Angular JS (1.5.8). This project uses also WebCola 3.1.3 and d3 3.4.11. When I try to change any property of my $scope from inside a d3 callback handler function, the binding takes no effect in rendered HTML.…
lordshark
  • 83
  • 9
1
vote
1 answer

Cytoscape Cola Layout: How to restart the layout without any change of positions?

I'm trying to use the Cytoscape cola layout to render a graph that should apply a force directed layout while using it (so when dragging nodes around, they should act as if there is some gravity involved). Relevant…
Jesse
  • 422
  • 3
  • 19
1
2