Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
background-color: lightgrey;
}
svg {
width: 100%;
height: 100%;
position: center;
}
.node circle {
fill: #999;
}
.node text {
font: 10px sans-serif;
}
.node--internal circle {
fill: #555;
}
.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link {
fill: none;
stroke: #555;
stroke-opacity: 0.4;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<svg width="960" height="2000"></svg>
<script>
var margin = {top: 30, right: 50, bottom: 30, left: 50};
var width = 960 - margin.left - margin.right;
var height = 2000 - margin.top - margin.bottom;
var g = d3.select("svg")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tree = d3.tree()
.size([height, width - 140]);
d3.json("all_countries_2015.json", function(error, data) {
if (error) throw error;
var hierarchy = d3.hierarchy(data);
tree(hierarchy);
var link = g.selectAll(".link")
.data(hierarchy.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function diagonal(d) {
if(d.parent === hierarchy.descendants[0]){
return "M" + d.y + "," + d.x
+ " " + d.parent.y + "," + d.parent.x
} else {
return "M" + d.y + "," + d.x
+ "C" + (d.parent.y + 100) + "," + d.x
+ " " + (d.parent.y + 100) + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
}
}
);
var node = g.selectAll(".node")
.data(hierarchy.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf");})
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
})
node.append("circle")
.attr("r", 3);
node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? -6 : 6; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) {
return d.data.data.id;
});
});
</script>
</body>
https://d3js.org/d3.v4.min.js