D3.js Adding links between elements in a radial tree (Hierarchical edge bundling elements)

My current biggest issue is that the HEB has no "root", but the tree starts with a single item. So everything I have tried so far has led to a big mess at the center of the tree.

Given that you have a root, why not set that as the center "node" and make it a radial tree, like this? Here is another example, but with multiple roots.

That said, you did not ask for a radial tree, even if it sounds like that would answer your question. If you are determined to keep things arranged in circles of varying radium, maybe the problem to be solved is that of the criss-crossing of the lines looking so "messy". If that is the case, then a different sorting algorithm might do the trick. Here is an article that expands on using different sorting algorithms in a similar scenario with D3.js. D3 layout algorithms are also open source online.

The best resource I was able to find for you was this Stack Mathematics Answer. A few points especially stand out for me in it:

1. You can have a total mess of connections/branches, but if it's interactive and the branches to and from a specific node light up when you hover over that node, then it can still be a readable/usable graph.
2. You can try different sorting algorithms until you find one that works well with your data.
3. You can have one or more nodes inside the circle, and in this case putting the root node in the middle might make a lot of sense.

It is not a practically usable answer, since it's in Mathematica, but I think its explanation of the underlying theories and techniques is useful.

A perhaps more artistic approach, if you do not want to put the root of the tree in the center, would be to make all branches from parents to the root parent be semi-transparent, and possibly a different color.

Hope this helps!

I have managed to add links between elements in this JSFiddle using parts of the code found in the original hierarchical edge bundling by Mike Bostock and added them to radial version of the collapsible tree. However, they do not update when collapsing or expanding children!

var bundle = d3.layout.bundle();var line = d3.svg.line.radial()    .interpolate("bundle")    .tension(.85)    .radius(function(d) { return d.y; })    .angle(function(d) { return d.x / 180 * Math.PI; });

then in update(source):

var middleLinks = packageImports(root);svg.selectAll("path.middleLink")          .data(bundle(middleLinks))        .enter().append("path")          .attr("class", "middleLink")          .attr("d", line);

The "packageImport" function can be found at the bottom.

function packageImports(json) {      var map = {},          imports = [];      console.log(json.children);      // Compute a map from name to node.      json.children.forEach(function(d) {        console.log(d.name)        map[d.name] = d;      });      // For each import, construct a link from the source to target node.      json.children.forEach(function(d) {        if (d.imports) d.imports.forEach(function(i) {          imports.push({source: map[d.name], target: map[i]});        });      });      console.log(imports);      return imports;    }