Let's create cluster with same json file as previous post(2020/12/29 - [d3.js] - tree layout, tree.nodes, tree.links).
- HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3js</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var canvas = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500)
.append("g")
.attr("transform","translate(50,50)");
var tree = d3.layout.cluster()
.size([400,400])
d3.json("mydata.json",function (data) {
var nodes = tree.nodes(data); //it returns all the objects in the json file in other words, it returns an array of all the nodes
var links = tree.links(nodes);//path between each node
var node = canvas.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class","node")
.attr("transform",function (d) {return "translate("+d.y + ","+d.x+")";})
node.append("circle")
.attr("r",5)
.attr("fill","skyblue");
node.append("text")
.text(function (d) {return d.name;});
var diagonal = d3.svg.diagonal()
.projection(function (d) {return [d.y, d.x];}); //path generator which is converts the start and ending points of each object
canvas.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link") //it gives each path the class of link
.attr("fill","none")
.attr("stroke","#ADADAD")
.attr("d", diagonal);
})
</script>
</body>
</html>
- Result
Recalculate the position of Mr.X.
'd3.js' 카테고리의 다른 글
| histogram, linear, axis, map (0) | 2020.12.31 |
|---|---|
| histogram layout, parseInt (0) | 2020.12.30 |
| tree layout, tree.nodes, tree.links (0) | 2020.12.29 |
| diagonal (0) | 2020.12.29 |
| scaleOrdinal, pie, centroid (0) | 2020.12.29 |