D3.js v5 строит древовидную "матрицу"

var margins = {top:100, bottom:300, left:100, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);

var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");

  var data = [
    {name:"jackie chan", tree: {
      "name": "Top Level",
      "children": [
            { "name": "Fund 1" },
            { "name": "Fund 2" },
            { "name": "Fund 3"}
          ]
    }},
    {name:"jet li", tree: {
      "name": "Top Level",
      "children": [
            { "name": "Fund 1" },
            { "name": "Fund 2" },
            { "name": "Fund 3"},
            { "name": "Fund 4"},
          ]
    }},
    {name:"donnie yen", tree: {
      "name": "Top Level",
      "children": [
            { "name": "Fund 1" },
            { "name": "Fund 2" },
          ]
    }},
    {name:"chow yun fat", tree: {
      "name": "Top Level",
      "children": [
            { "name": "Fund 1" },
            { "name": "Fund 2" },
            { "name": "Fund 3"},
            { "name": "Fund 4"},
            { "name": "Fund 5"},
          ]
    }},
  ];

  //var formatComma = d3.format(",");

  var columns = 3;
  var spacing = 150;
  var vSpacing = 180;

  var pmG = graphGroup.selectAll('.pm')
    .data(data)
    .enter()
    .append('g')
    .attr('class', 'pm')
    .attr('id', (d, i) => 'pm' + i)
    .attr('transform', (d, k) => {
      var horSpace = (k % columns) * spacing;
      var vertSpace = ~~((k / columns)) * vSpacing;
      return "translate(" + horSpace + "," + vertSpace + ")";
    });

var miniTree = d3.tree()
    .size([150, 75]);

pmG.append('rect')
    .attr('x',0)
    .attr('y',0)
    .attr('width',100)
    .attr('height',25)
    .style('fill',"#003366");

pmG.append('text')
    .attr('x',50)
    .attr('y',-10)
    .attr('text-anchor','middle')
    .text(function(d) {return d.name});


pmG.selectAll(null)
    .data( function(d) { 
        return miniTree(d3.hierarchy(d.tree)).descendants().slice(1) 
        
        })
  .enter().append("path")
    .attr("transform", "translate(-25,20)") // extra positioning.
    .attr("class", "link")
    .attr("d", function(d) {
       return "M" + d.x + "," + d.y
         + "C" + d.x + "," + (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," + d.parent.y;
       });

pmG.selectAll(null)
    .data( function(d) {return miniTree(d3.hierarchy(d.tree)).descendants() })
  .enter().append("g")
    .attr("class", function(d) {
      return "node" +
        (d.children ? " node--internal" : " node--leaf"); })
    .attr("transform", function(d) {
      return "translate(" + (d.x - 25) + "," + (d.y+20) + ")"; }) // with extra positioning.
      .append("circle")

path {
  stroke-width: 1px;
  fill: none;
  stroke: #003366;
}

circle {
  r: 5px;
  fill: #003366;
}

<script src = "https://d3js.org/d3.v5.min.js"></script>