attempt to render cycles in graph
- 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+' ';
};
```

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