4

I am trying to make network diagram in which the nodes are grouped by a property, and in which they are bundled by group with both location (force layout) and using a convex hull. Like this but without the click to collapse/expand. That model/code is a bit too complicated for a beginner to dissect and learn from.

My question can be simply put: is there example code of the network+grouped capability that includes the possibility of nodes in multiple groups?

Sometimes there will be only one node in a group, and the basic convex hull doesn't work for less than three. The above example has a fix for that (that I don't understand), and so does this one that creates invisible nodes and may be easier.

The groups can be nested at multiple layers. This tutorial provides all the info necessary to use d3.nest() to get data in a hierarchy. But it may not be a hierarchy, it could be that a node is in multiple groups and needs to be in the correct hulls and location. Some nodes will not be in any group, but would still be connected in the network.

I know that the forces in force layouts are additive, so it shouldn't be a problem to have both the groups and the links effecting the node locations in a simple way, but I haven't seen a simple example of this. My approach is to add network connections to the multi-foci example and see if I can get that to work.

As bonuses, the nodes shouldn't overlap and for the hierarchical elements the base layer nodes should be put around a circle so that the nodes that are in multiple groups are in between those groups like this. I mentioned these now because the desire for these features may effect the best solution to the above desiderata.

I will be working on this building up from this JSFiddle; I will continue to update and refine this question as I make progress on the code myself. I would appreciate any pointers to code that's closer than the collapsible one to what I want, caveats for the limitations/problems of D3 (like needing a work-around for convex hulls of 1-2 nodes), and code that provides one of these capabilities in an understandable and modular way toward the final goal. Really, any help is appreciated.

Aaron Bramson
  • 1,176
  • 3
  • 20
  • 34
  • I've figured out the layered convex hulls for both overlapping and hierarchical groupings, including single-node groups. You can check it out in [this updated JSFiddle](http://jsfiddle.net/AaronBramson/0smgr510/7/). I was also able to get the subsubgroups all along a circle, but I commented that out to instead have tighter links within groups. This might be possible just using clever functions for `linkDistance` and `linkStrength` depending on groups...somehow. Also, how can we get the links on top of the convex hulls? Redrawing them every tick instead of updating their x,y coords? – Aaron Bramson Nov 12 '15 at 10:23
  • I asked, and answered, the question about getting the convex hulls to wrap around nodes of different sizes in [this question](http://stackoverflow.com/questions/33708351/how-to-make-a-convex-hull-covering-differently-sized-nodes-in-d3) which brings us [this most updated JSFiddle for this question](http://jsfiddle.net/AaronBramson/0smgr510/12/). – Aaron Bramson Nov 16 '15 at 08:26
  • Okay, now I've got the edges redrawing on top of the convex hulls, and then nodes redrawn on top of the links in [this updated JSFiddle](http://jsfiddle.net/AaronBramson/0smgr510/13/). All that's left for this capability is to get the groupings to effect the force layout appropriately like in [this example](http://bl.ocks.org/GerHobbelt/3071239), but without all the extra stuff. – Aaron Bramson Nov 16 '15 at 08:51

2 Answers2

4

Although this question didn't attract much attention over the past week, hopefully the answer will be useful to some people. I managed to use a function for the linkDistance that starts off large and shrinks depending on (1) whether the source and target are in the same collection, and (2) the level of that collection -- i.e., groups or subgroups or subsubgroups.

The basic solution idea came from the only example I could find of this capability. The actual linkDistance function I used is a bit of a simplistic approach, but one which does the job well and can be easily adapted to lots of other purposes for lots of other people (I hope). Depending on the groupings you have you may want to adjust other features of the links (like color) via functions like the ones I used here.

force
    .nodes(graph.nodes)
    .links(graph.links)
    .linkDistance(function(thisLink) { 
        var myLength = 100, theSource = thisLink.source, theTarget = thisLink.target;
        groupNodes.forEach(function(groupList) { 
            if (groupList.indexOf(theSource) >= 0 && groupList.indexOf(theTarget) >= 0) {
                myLength = myLength * 0.7;
            }
        });
        subgroupNodes.forEach(function(groupList) { 
            if (groupList.indexOf(theSource) >= 0 && groupList.indexOf(theTarget) >= 0) {
                myLength = myLength * 0.4;
            }
        });
        subsubgroupNodes.forEach(function(groupList) { 
            if (groupList.indexOf(theSource) >= 0 && groupList.indexOf(theTarget) >= 0) {
                myLength = myLength * 0.2;
            }
        });
        return myLength; } )
    .linkStrength(function(l, i) { return 1; } )
    .gravity(0.05)   
    .charge(-600)   
    .friction(0.5)  
    .start();

A version of this solution, along with other improvements, can be found at this JSFiddle.

Although this answers my question by adjusting the link forces by the group membership, it doesn't combine forces of links + groups in the way that I intended originally. I would still like the ability to give the subsubgroups the "desire" to move away from each other into corners, but constrained by the edges that connect them (rather then forcing them to be on a circle layout).

Note that my groups are defined exogenously as lists of lists. If the group membership in your case is a node property, then you can use the d3.nest() function to produce groups of nodes that I had to create with a map function, but I don't think that will work if the groups have overlapping members.

Aaron Bramson
  • 1,176
  • 3
  • 20
  • 34
  • Thanks for your code on JSFiddle, @Aaron. I have been using it. Could you tell me how you think it should be adapted to support zoom ? I have not been able to find a solution. – altius_rup Dec 01 '21 at 19:25
  • I don't know what you mean about supporting zoom, but I haven't been using D3 recently. If you have a specific functionality request, it's probably best to create a new question on how to achieve that functionality with this code as the base. – Aaron Bramson Dec 03 '21 at 00:53
  • I just want to be able to zoom in and out of this D3 graph. Adding the D3 handleZoom feature is easy for nodes, but not for the hulls. Have you any suggestion ? – altius_rup Dec 04 '21 at 01:03
  • 1
    No, no idea. I haven't touched this stuff for so long, I don't remember off hand how those things work. – Aaron Bramson Dec 04 '21 at 04:36
0

This is a great example, many network libraries including cytoscape.js do not allow this kind of complex grouping. I have 2 questions:

  1. With reference to: " All that's left for this capability is to get the groupings to effect the force layout appropriately" would this highly impact larger networks ? This is basically allowing the layout algorithm to take into consideration groups ?

  2. I 'm trying to migrate your approach to d3 v4 and was just wondering if you had already tried to do that ?

Fede
  • 41
  • 1
  • 5
  • For (1) probably, but I don't know. Or rather, at some point it certainly would, but my networks wasn't large enough for that effect to be a problem (esp compared to the problems caused by a large number of edges) (2) I haven't touched D3 v4 yet. – Aaron Bramson Mar 05 '20 at 03:33