2. 程式人生 > >D3.js中Radial Cluster Dendrogram詳解

D3.js中Radial Cluster Dendrogram詳解

阿新 • • 發佈：2019-02-11

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()函式。

相關推薦

D3.js中Radial Cluster Dendrogram詳解

Radial Cluster Dendrogram 上一篇聊了Cluster Dendrogram，這一篇對照著聊一聊Radial Cluster Dendrogram. “radial”意思為放射狀的，因此，估計你也能猜到Radial Cluster Den

js中的 || 與 && 運算子詳解

這篇文章主要介紹了js中的 || 與 && 運算子詳解,需要的朋友可以參考下 一 js中邏輯運算子在開發中可以算是比較常見的運算子了，主要有三種：邏輯與&&、邏輯或||和邏輯非！。 當&&和|| 連線語句時，兩邊的

js中typeof和instanceof詳解

類陣列物件和物件 文章開始先來看一下js中陣列物件和類陣列物件。在js中陣列是一個物件，陣列物件繼承自Array物件 var arr1 = []; var arr2 = new Array(); 這兩種方式定義出來的陣列，由於Array.p

JS中setTimeout()的用法詳解

setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層容器名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method 請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout(

JS中正則表示式詳解及最基本的判斷手機號，郵箱，身份證

    首先最基本的符號型別及含義整理一下。     1，最基本的符號：^  $  *  +  ?         ^    代表字串的開始位置 &nbs

D3.js 動態資料重新整理檢視詳解

在官網有著豐富demo的基礎上，使用d3繪製一副靜態圖表並不是難事。但我們更多的需求是：根據使用者操作動態獲取資料庫中資料，進而重新整理檢視。 最生硬的方法：刪除element,重新繪製； d3.select('#svgID').remove();

JS中window.onload事件詳解

window.onload出現的原因？  我們都知道頁面的程式碼順序是從上往下進行載入，很多時候我們要對頁面中的某一個模組進行操作，這時候我們常常使用javascript程式碼來進行操作。為了能夠保

JS中的this原理詳解

this的用法 需要關注的是，不同調用位置上的呼叫形式，決定了this的指向； 獨立呼叫 預設繫結規則：this繫結給window; 在嚴格模式下，預設繫結規則會把this繫結undefined上； function foo() { consol

JS中的window.setTimeout()詳解

相關用法： setTimeout (表示式,延時時間) setInterval (表示式,互動時間) 其中延時時間/互動時間是以豪秒為單位的(1000ms=1s) setTimeout在執行時,是在載入後延遲指定時間後,去執行一次表示式,僅執行一次setInterval在執行時,它從載入後,每隔

【 D3.js 選擇集與資料詳解 — 4 】 enter和exit的處理方法以及處理模板

繫結資料之後，選擇集分為三部分：update、enter、exit。這三部分的處理辦法是什麼呢？本文將講解其處理方法，以及一個常用的處理模板。1. enter的處理方法如果沒有足夠的元素，那麼處理方法通常是使用append()新增元素。請看下面的程式碼：[javascript

js中的$.ajax()方法詳解

1.url: 要求為String型別的引數，（預設為當前頁地址）傳送請求的地址。 2.type: 要求為String型別的引數，請求方式（post或get）預設為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支援。 3.timeou

【2017-11+10】 JS中正則表示式詳解

在JS的開發過程中，很多時候都需要驗證表單的正確性；使用正則表示式能夠很好的簡化表單的驗證過程。 在JS中，內建了 RegExp 物件，用來進行正則匹配。 一. RegExp 物件的使用

D3.js中Stream graph詳解

var n = 20, // number of layers 層的總數 m = 200, // number of samples per layer 每層的樣本數目 k = 10; // number of bumps per layer 每層的顛簸總數 // d3.stack()

D3.js中Bullet Charts詳解

Bullet Charts 今天我們來聊一聊 佔地兒小卻能表達足夠豐富的資料資訊的子彈圖。 子彈圖，顧名思義是由於該類資訊圖的樣子很像子彈射出後帶出的軌道。子彈圖無修飾的線性表達方式使我們能夠在狹小的空間中表達豐富的資料資訊，這種情況在寸尺寸金的報紙媒

D3.js中Population Pyramid詳解

// 定義相關尺寸 // margin定義svg畫圖的上 、右、下、左的外邊距 var margin = {top: 20, right: 40, bottom: 30, left: 20}, // 計算寬度 width = 960 - margin.left - margin.righ

hive 中 order by ,sort by ,distribute by ,cluster by 詳解

1. order by order by 會對輸入做全域性排序，因此只有一個reducer（多個reducer無法保證全域性有序） 只有一個reducer，會導致當輸入規模較大時，需要較長的計算時間。 set hive.mapred.mode=nonstrict; (default

JavaScript中return的用法詳解

style 返回 www log tle blog 意思 charset fun 1、定義：return 從字面上的看就是返回，官方定義return語句將終止當前函數並返回當前函數的值，可以看下下面的示例代碼： <!DOCTYPE html><html l

（轉）Arcgis for Js之Graphiclayer擴展詳解

不同的 nes library 創建 都是 拖拽 oms hang graph http://blog.csdn.net/gisshixisheng/article/details/41208185 在前兩節，講到了兩種不同方式的聚類，一種是基於距離的，一種是基於區域範圍

Vue.js 運行環境搭建詳解（基於windows的手把手安裝教學）及vue、node基礎知識普及

頁面 沒有 全能 服務器程序 重載 帶來 size 耐心 編程 　　Vue.js 是一套構建用戶界面的漸進式框架。他自身不是一個全能框架——只聚焦於視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。在與相關工具和支持庫一起使用時，Vue.j

Android中的windowSoftInputMode屬性詳解

stun -h oid 中文意思 ecif andro 標題 進行 模式 如何實現軟鍵盤不自動彈出，使用的方法是設置android:windowSoftInputMode屬性。那麽，這個屬性到底是幹什麽的，他有什麽作用呢？今天這篇文章，就是探索android:win