JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="mytree"></div>

CSS

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

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

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

JavaScript

var species_tree = {
 "name": "root",
 "children": [
  {
   "name": "N1",
   "children": [
    {
     "name": "N2",
     "children": [
         {"name": "Species1"},
      {"name": "Species2"},
      {"name": "Species3"}
     ]
    },
    {
     "name": "N3",
     "children": [
      {"name": "Species4"},
      {"name": "Species5"}
     ]
    }
   ]
  }
 ]
};

var width = 500;
var height = 450;

// TREE CREATION
var cluster = d3.layout.cluster().size([300,300]).nodeSize([70,50]);

var nodes = cluster.nodes(species_tree);
var links = cluster.links(nodes);

var svg = d3.select("#mytree")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(80,220)");

var link = svg.selectAll(".link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", elbow);

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

var label = node.append("g")
    .attr("class", "label");

label.append("circle")
    .attr("r", 4.5);

label.append("text")
    .attr("x", function(d) {return 8})
    .text(function(d) {return d.name});

// FOREIGNOBJECTS
var placeholders = d3.selectAll(".node")
    .filter(function(d) {return d.children === undefined ? this : 0})
    .append("foreignObject")
    .attr("width", "200")
    .attr("height", "40")
    .attr("y", -17.5)
    .attr("x", 50)
    .append("xhtml:body");

var newsvg = placeholders
    .append("svg")
    .attr("width", 200)
    .attr("height", 40)
    .append("rect")
    .attr("x",0)
    .attr("y",0)
    .attr("width", 80)
    .attr("height", 30)
    .attr("fill", "blue");
    
// MOVE
d3.selectAll("rect")
    .transition()
    .duration(2000)
    .attr("x", 100);


function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
      + "V" + d.target.x + "H" + d.target.y;
}