score:2

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.


Related Query

More Query from same tag