d3.js:dendrogram
code:testxx.js
jdata = {"children":
[{"name":"boss1","children":
[{"name":"mister_a","colname":"level3"},
{"name":"mister_b","colname":"level3"},
{"name":"mister_c","colname":"level3"},
{"name":"mister_d","colname":"level3"}],
"colname":"level2"},
{"name":"boss2","children":
[{"name":"mister_e","colname":"level3"},
{"name":"mister_f","colname":"level3"},
{"name":"mister_g","colname":"level3"},
{"name":"mister_h","colname":"level3"}],
"colname":"level2"}],
"name":"CEO"}
その1
code:test1.js
// set the dimensions and margins of the graph
var width = 460
var height = 460
// append the svg object to the body of the page
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)"); // bit of margin on the left = 40
// read json data
.then(function(data) {
// Create the cluster layout:
var cluster = d3.cluster()
// Give the data to this cluster layout:
var root = d3.hierarchy(data, function(d) {
return d.children;
});
cluster(root);
// Add the links between nodes:
svg.selectAll('path')
.data( root.descendants().slice(1) )
.enter()
.append('path')
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.parent.y + 50) + "," + d.x
+ " " + (d.parent.y + 150) + "," + d.parent.x // 50 and 150 are coordinates of inflexion, play with it to change links shape
+ " " + d.parent.y + "," + d.parent.x;
})
.style("fill", 'none')
.attr("stroke", '#ccc')
// Add a circle for each node.
svg.selectAll("g")
.data(root.descendants())
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"
})
.append("circle")
.attr("r", 7)
.style("fill", "#69b3a2")
.attr("stroke", "black")
.style("stroke-width", 2)
})
その2
code:test2.js
// set the dimensions and margins of the graph
var width = 460
var height = 460
var radius = width / 2 // radius of the dendrogram
// append the svg object to the body of the page
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// read json data
.then(function(data) {
// Create the cluster layout:
var cluster = d3.cluster()
.size(360, radius - 60); // 360 means whole circle. radius - 60 means 60 px of margin around dendrogram // Give the data to this cluster layout:
var root = d3.hierarchy(data, function(d) {
return d.children;
});
cluster(root);
// Features of the links between nodes:
var linksGenerator = d3.linkRadial()
.angle(function(d) { return d.x / 180 * Math.PI; })
.radius(function(d) { return d.y; });
// Add the links between nodes:
svg.selectAll('path')
.data(root.links())
.enter()
.append('path')
.attr("d", linksGenerator)
.style("fill", 'none')
.attr("stroke", '#ccc')
// Add a circle for each node.
svg.selectAll("g")
.data(root.descendants())
.enter()
.append("g")
.attr("transform", function(d) {
return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
})
.append("circle")
.attr("r", 7)
.style("fill", "#69b3a2")
.attr("stroke", "black")
.style("stroke-width", 2)
})
その3
code:test.css
.node circle {
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.node--internal text {
}
.link {
fill: none;
stroke-width: 2px;
}
code:test.js
// set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
width = 660 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// declares a tree layout and assigns the size
var treemap = d3.tree()
// load the external data
.then(function(treeData) {
// assigns the data to a hierarchy using parent-child relationships
var nodes = d3.hierarchy(treeData, function(d) {
return d.children;
});
// maps the node data to the tree layout
nodes = treemap(nodes);
// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom),
g = svg.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// adds the links between the nodes
var link = g.selectAll(".link")
.data( nodes.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
// adds each node as a group
var node = g.selectAll(".node")
.data(nodes.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 + ")"; });
// adds the circle to the node
node.append("circle")
.attr("r", 10);
// adds the text to the node
node.append("text")
.attr("dy", ".35em")
.attr("x", function(d) { return d.children ? -13 : 13; })
.style("text-anchor", function(d) {
return d.children ? "end" : "start"; })
.text(function(d) { return d.data.name; });
});
code:treeData.json
{
"name": "Top Level",
"children": [
{
"name": "Level 2: A",
"children": [
{ "name": "Son of A" },
{ "name": "Daughter of A" }
]
},
{ "name": "Level 2: B",
"children": [
{ "name": "Bの長男" },
{ "name": "Bの次男" },
{ "name": "Bの長女" }
]
}
]
}
https://img.shields.io/badge/D3.js-dendrogram-F9A03C.svg?logo=D3.js&style=for-the-badge