d3.js combining Hierarchical Edge Bundling and Radial Reingold–Tilford Tree + data

Question

I would like to (sort of) combine the Hierarchical Edge Bundling and the Radial Reingold–Tilford Tree

It would look a little like this (pardon my horrible paint.net skills)*:

*the children are supposed to be in an arc, like in the Tree.

I have setup this fiddle that shows simple data in HEB: https://fiddle.jshell.net/d1766z4r/2/

I have already combined the two types of data (in comments at the begining, that will replace the current variable "classes"):

var classes = [
{"name":"test.cluster1.item1","children": [
      {"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]},
      {"name": "test.cluster1.item5"}
     ]},
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]},
{"name":"test.cluster1.item3"}
];

If there is a better way to combine the data, feel free to change it accordingly.

Other than changing the data, I am not sure how to proceed, as I am a d3.js and javascript novice, especially when it'll come to linking the right subitem (item 4), but not the other (item 5). However, I will consider an answer that will show a link to all the children of item 1 as a way to start developing this.

Please update this fiddle or make a new one to back your code up if possible. Any advice on how to proceed is welcomed of course.

The next step will be to make those children show or hide on click, using a method similar to the Collapsible Tree (feel free to give advice on that aswell, but it will probably be a new question later if I can't find out how to do it), as I will have to work with big amounts of data, justifying children in the first place.

Finally, every child could have children of its own, but 1 line of children will suffice for now. I'll get to that later I suppose.

UPDATE: The answers don't have to be complete solutions, every bit (see what I did there?) helps!

Answer 1

I might be completely off track to what you are asking, please clarify if this is the case.

TL;DR: Here is how it looks, based on what I interpreted from the question. Have added some more data for testing.

Hierarchical Edge Bundling, provides a way of visualizing non-hierarchical edges in the graph. Here is the link to the paper which is implemented in d3, if you have not found.

In the example only leaf nodes are shown by filtering the other nodes:

node = node
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("text")
      .attr("class", "node")...

Hierarchical relations in the example are represented by dots in names, so cluster1 is the parent of item1, item2 and item3. Here is how it look if we remove the filter while appending nodes.

Now, my interpretation of your question is you want to use Hierarchical Edge Bundling for visualizing the non-hierarchical relations (represented by imports in the example) and 'Radial Reingold–Tilford' for hierarchical relations.

Here is how this can be done:

Data format need not change to what you have proposed. Below should be okay:

    var classes = [
        {
            "name": "test.cluster1.item1.item4",
            "imports": ["test.cluster1.item2", "test.cluster1.item3"]
        },
        {
            "name": "test.cluster1.item1.item5",
            "imports": []
        }
]

Adopt packageImports function to get hierarchical edges from the nodes:

nodes.forEach(function (d) {
            if(d.children && d.name !== "") d.children.forEach(function (i) {
                imports.push({
                    source: map[d.name],
                    target: i
                });
            });
        });

Add the radial diagonal generator from Radial Reingold–Tilford example :

  var diagonal = d3.svg.diagonal.radial()
                .projection(
                        function(d) {
                            debugger;
                            return [d.y, d.x / 180 * Math.PI];
                        }
                );

Append hierarchical edges path:

treeLink = treeLink
            .data(getHeirarchialEdges(nodes))
            .enter().append("path")
            .attr("class", "tree-link")
            .attr("d", diagonal);

I have also added to the mouseover and mouseout functions to highlight the hierarchical nodes, try hovering over any parent node.