Most simple d3.js tree

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@1.29.5/d3.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@1.29.5/d3.layout.js"></script>
<style>

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 4.5px;
}
</style>

</head>
  <body>

var treeData = {"name" : "A", "children" : [
{"name" : "A1" },
{"name" : "A2" },
{"name" : "A3", "children": [
{"name" : "A31", "children" :[
{"name" : "A311" },
{"name" : "A312" }
]}] }
      ]};

var vis = d3.select("#viz").append("svg:svg")
.attr("width", 400)
.attr("height", 300)
.append("svg:g")
.attr("transform", "translate(40, 0)");

var tree = d3.layout.tree()
.size([300,150]);

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var nodes = tree.nodes(treeData);
      var link = vis.selectAll("pathlink")
.data(tree.links(nodes))
.enter().append("svg:path")
.attr("class", "link")
.attr("d", diagonal);

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

node.append("svg:circle")
.attr("r", 4.5);

node.append("svg:text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });

</script>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?1.27.2 to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js?1.27.2 to a secure url

https://mbostock.github.com/d3/d3.js?1.27.2

https://mbostock.github.com/d3/d3.layout.js?1.27.2