Radial Cluster Dendrogram
上一篇聊了Cluster Dendrogram，這一篇對照着聊一聊Radial Cluster Dendrogram. “radial”意思爲放射狀的，因此，估計你也能猜到Radial Cluster Dendrogram長啥樣了。
Radial形狀的Cluster Dendrogram靚照閃亮登場[來自官網]：
接下來，解釋這張圖是怎麼實現的，Radial Cluster Dendrogram和上一篇講的Cluster Dendrogram所用的數據文件是一樣的。
index.html詳解——源碼
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.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>
<svg width="960" height="950"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// 定義一個svg畫布
var svg = d3.select("svg"),
// 獲取svg畫布的寬度
width = +svg.attr("width"),
// 獲取svg畫布的高度
height = +svg.attr("height"),
// 在畫布上添加g元素，並將放置到translate動作所指示的位置
g = svg.append("g").attr("transform", "translate(" + (width / 2 - 15) + "," + (height / 2 + 25) + ")");
// d3.stratify()函數用來將數據轉換爲tree佈局所需要的格式，例如爲數據計算並添加parent,depth,children等信息
var stratify = d3.stratify()
// 此處定義節點的parentId的計算方式爲：從節點id字段中截取最後一個“.”之前的字符串
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
// 此處定義佈局函數tree().
var tree = d3.cluster()
// 設置佈局的大小
.size([360, 390])
// cluster.separation函數用來計算兩個節點之間的間隔
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
// 處理數據
d3.csv("flare.csv", function(error, data) {
if (error) throw error;
// 首先，調用stratify(data)
// 返回的是一個樹結構的數據格式，其中的節點具有：children、data、height、id、depth、parent字段，
// 這些字段都是stratify()函數自動計算並且添加的
// 其次，調用 tree()函數，進行tree()佈局，此處會自動佈局，爲數據添加可視化所需要的位置信息
// 所以，調用tree()之後，root數據中的節點除了children、data、height、id、depth、
// parent之外，又添加了x,y兩個字段信息，表示節點的位置信息
// sort是用來對節點按照height屬性或者是id的字典順序來進行排序
var root = tree(stratify(data)
.sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); }));
// 繪製節點之間的連接線
var link = g.selectAll(".link")
// d3中descentdants函數用來返回某個結構中所有的節點數組，例如此處root是樹形結構的數據，
// 那麼調用root.descentdants()之後返回的是root結構中所有節點的一個數組；
// js中的slice()函數從已有的數組中返回指定的元素；
// 因此 root.descendants().slice(1)函數返回root中除了depth 爲0的節點之外的所有節點
// 組成的數組,這裏要去掉depth爲0的節點，是因爲，根節點只有和其子節點之間的連線，沒有哪個
// 節點指向根節點並和其之間有連線了
.data(root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
// 此處通過連線的子節點和父節點的座標來計算path元素的屬性“d”的值，以此來繪製節點之間的連線
// 此處和上一篇中Cluster Dendrogram不同的是，path的路徑數據是通過project()函數來映射
// 計算節點的座標位置
return "M" + project(d.x, d.y)
+ "C" + project(d.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, d.parent.y);
});
// 繪製節點
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
// 根據佈局算出的每個節點的座標位置來擺放節點，此處位置的計算與上一篇Cluster Dendrogram不同，
// 是通過project()函數來映射計算節點的座標位置
.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; });
// 每個節點用圓來繪製
node.append("circle")
.attr("r", 2.5);
// 爲節點綁定文字描述
node.append("text")
.attr("dy", ".31em")
// 此處與上一篇的Cluster Dendrogram不同，通過角度180作爲界線來判斷文字的位置
.attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
.style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })
// 上一篇的Cluster Dendrogram由於是普通的集羣結構，沒有文字旋轉操作，
// 而由於Radial Cluster Dendrogram呈現出放射狀，所以，文字需要一定的旋轉
.attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
});
// project函數用來通過節點的座標來映射，計算angle,radius，最終返回映射後的座標
function project(x, y) {
var angle = (x - 90) / 180 * Math.PI, radius = y;
return [radius * Math.cos(angle), radius * Math.sin(angle)];
}
</script>
至此，Radial Cluster Dendrogram圖形的實現過程解釋完畢。Radial Cluster Dendrogram的實現和上一節的Cluster Dendrogram對照着看，比較好理解兩者的區別，Radial Cluster Dendrogram就像把 Cluster Dendrogram 彎曲折成一個圓環了。這個動作的實現用非常小的一個改動就實現了，那就是本篇中強大的project()函數。