Radial tree with links in D3.js

The goal is to add the same kind of links as in Hierarchical Edge Bundling between the parent nodes, that will update when (un)collapsing the tree, with clusters if possible

HTML

<script src="//d3js.org/d3.v3.min.js"></script>

CSS

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var flare =
{
    "name": "root",
    "children": [
        {
            "name": "test1.parent1","children": [
                {"name": "test1.child11","children": [
                    {"name": "test1.child111"},
                    {"name": "test1.child112"}
                ]}
            ],"imports": ["test2.parent2","test3.parent3","test4.parent4"]
        },
        {
            "name": "test2.parent2","children": [
                {"name": "test2.child21"},
                {"name": "test2.child22"},
                {"name": "test2.child28","children":[
                    {"name": "test2.child281"},
                    {"name": "test2.child282"}
                ]}
            ],"imports": ["test3.parent3"]
        },
        {"name": "test3.parent3","imports": ["test4.parent4"]},
        {
            "name": "test4.parent4","children": [
                {"name": "test4.child41"},
                {"name": "test4.child42"}
            ]
        }
    ]
};

var diameter = 800;

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = diameter,
    height = diameter;
    
var i = 0,
    duration = 350,
    root;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 80])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

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

var svg = d3.select("body").append("svg")
    .attr("width", width )
    .attr("height", height )
    .call(d3.behavior.zoom().on("zoom", function() {
        svg.attr("transform", "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")" + " scale(" + d3.event.scale + ")")
      })).on("dblclick.zoom", null)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")")
  .append("g");

root = flare;
root.x0 = height / 2;
root.y0 = 0;

root.children.forEach(collapse); // start with all children collapsed
update(root);

//create a...