d3-mindmap-trees-basic

by Ayri Rin

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="900" height="600"></svg>

CSS

.node circle {
  fill: #999;
}

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

.node--internal circle {
  fill: #555;
}

.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

JavaScript

var data = {
  "name": "Root",
  "children": [{
      "name": "Branch 1"
    }, {
      "name": "Branch 2",
      "children": [{
        "name": "Branch 2.1"
      }, {
        "name": "Branch 2.2",
        "children": [{
          "name": "Branch 2.2.1"
        }, {
          "name": "Branch 2.2.2"
        }]
      }]
    }, {
      "name": "Branch 3"
    }, {
      "name": "Branch 4",
      "children": [{
        "name": "Branch 4.1"
      }, {
        "name": "Branch 4.1112"
      }]
    }, {
      "name": "Branch 5"
    },


    {
      "name": "Branch 6"
    }, {
      "name": "Branch 7",
      "children": [{
        "name": "Branch 7.1"
      }, {
        "name": "Branch 7.2",
        "children": [{
          "name": "Branch 7.2.1"
        }, {
          "name": "Branch 7.2.2"
        }]
      }]
    }, {
      "name": "Branch 8"
    }, {
      "name": "Branch 9",
      "children": [{
        "name": "Branch 9.1"
      }, {
        "name": "Branch 9.2"
      }]
    }, {
      "name": "Branch 10"
    }
  ]
};

var split_index = Math.round(data.children.length / 2)

// Left data
var data1 = {
  "name": data.name,
  "children": JSON.parse(JSON.stringify(data.children.slice(0, split_index)))
};

// Right data
var data2 = {
  "name": data.name,
  "children": JSON.parse(JSON.stringify(data.children.slice(split_index)))
};

// Create d3 hierarchies
var right = d3.hierarchy(data1);
var left = d3.hierarchy(data2);

// Render both trees
drawTree(right, "right")
drawTree(left, "left")

// draw single tree
function drawTree(root, pos) {

  var SWITCH_CONST = 1;
  if (pos === "left") {
    SWITCH_CONST = -1;
  }

  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height")

  // Shift the entire tree by half it's width
  var g = svg.append("g").attr("transform", "translate(" + width / 2 + ",0)");

  // Create new default tree layout
  var tree = d3.tree()
    // Set the size
    // Remember the tree is rotated
    // so the height is...