anvaka / anvaka/VivaGraphJS

attempt to render cycles in graph

Open
#159 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
3.9k
Forks
418
PR merge metrics
No merged PRs in 30d

Description

I am trying to do an experiment: to draw polygons where there are triades (cycles between node A-B-C-A).

The problem I encounter is that the resulting polygon stays atop of each node, and cannot update it in the graphics object.

Do I need to extend the graphics object?
Here what I tried to do:

``` javascript

// Step 2. We add nodes and edges to the graph:
graph.addLink(1, 2);
graph.addLink(2, 3);
graph.addLink(1, 3);

// I strore my cycle in an hash table:

var ht = new HashTable();

ht.setItem(1,[2,3]);
ht.setItem(2,[1,3]);
ht.setItem(3,[2,1]);

// function to fetch the point of a cylce
function polyDraw(nodeId) {
var poly = [], point;
for (var i = 0; i < ht.getItem(nodeId).length; i++) {
// get point in layout of hte parent node!!
point = layout.getNodePosition(ht.getItem(nodeId)[i])
poly.push(point)

};
return poly
}

// here I try to render: the idea is to create a polygon in between three nodes of a triade

graphics.node(function(node) {

// this store my points coordinates
var valueAttribute = '';

var polygon = Viva.Graph.svg('polygon')
.attr('style','fill:lime;stroke:purple;stroke-width:1');

for (i in layout.getLinkPosition(link.id)) {
//var point = layout.getLinkPosition(link.id);
//valueAttribute = point.x+','+point.y+' ';
console.log('my point dsds', layout.getLinkPosition(link.id).from);
var point = layout.getLinkPosition(link.id).from;
valueAttribute += point.x+','+point.y+' ';
};

console.log('valueAttribute',valueAttribute); //OK

// here I draw my polygon... but no good result when i place it

for (var i = polyDraw(node.id).length - 1; i >= 0; i--) {
var point = polyDraw(node.id)[i];
console.log('point', point);
valueAttribute += point.x+','+point.y+' ';

};

```

screen shot 2015-08-12 at 5 01 19 pm

Could you help in breaking down the problem into smaller part?
Maybe graphics object should be extended to do so; I was thinking to use a convex hull example, but that maybe be quite heavy in computation, so better to debrief with you what would be best first.

thank you.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the graphics.node callback and the uses of layout.getNodePosition() and layout.getLinkPosition() in the issue. Compare the polygon approach with the mentioned convex hull example and determine how rendered points should be updated as node positions change. Done means a cycle such as 1-2-3-1 renders as a polygon in the graph and follows its nodes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.