分層

範例 · 考慮下列的關係表格

名稱	父代
夏娃
該隱	夏娃
塞特	夏娃
以挪士	塞特
挪安	塞特
亞伯	夏娃
亞灣	夏娃
以諾	亞灣
亞蘇拉	夏娃

這些名稱很方便地獨一無二，因此我們可以明確地將階層表示為 CSV 檔案

name,parent
Eve,
Cain,Eve
Seth,Eve
Enos,Seth
Noam,Seth
Abel,Eve
Awan,Eve
Enoch,Awan
Azura,Eve

使用 csvParse 來剖析 CSV

const table = d3.csvParse(text);

這會傳回一個 {name, parent} 物件的陣列

[
  {"name": "Eve",   "parent": ""},
  {"name": "Cain",  "parent": "Eve"},
  {"name": "Seth",  "parent": "Eve"},
  {"name": "Enos",  "parent": "Seth"},
  {"name": "Noam",  "parent": "Seth"},
  {"name": "Abel",  "parent": "Eve"},
  {"name": "Awan",  "parent": "Eve"},
  {"name": "Enoch", "parent": "Awan"},
  {"name": "Azura", "parent": "Eve"}
]

轉換為 階層

const root = d3.stratify()
    .id((d) => d.name)
    .parentId((d) => d.parent)
  (table);

這個階層現在可以傳遞給階層配置，例如 tree，以進行視覺化。

分層運算子也可以使用 分隔路徑，這在檔案系統中很常見。

stratify()

原始碼 · 建立一個具有預設設定的新分層運算子。

const stratify = d3.stratify();

stratify(data)

原始碼 · 從指定的表格化資料產生一個新的階層。

const root = stratify(data);

stratify.id(id)

原始碼 · 如果指定了id，則將 id 存取器設定為給定的函式，並傳回此分層運算子。否則，傳回目前的 id 存取器，其預設值為

function id(d) {
  return d.id;
}

id 存取器會針對傳遞給 stratify 運算子 的輸入資料中的每個元素呼叫，並傳遞目前的資料 (d) 和目前的索引 (i)。然後會使用傳回的字串來識別節點與 父節點 id 之間的關係。對於葉節點，id 可能未定義；否則，id 必須是唯一的。（Null 和空字串等同於未定義。）

stratify.parentId(parentId)

原始碼 · 如果指定了parentId，則將父節點 id 存取器設定為給定的函式，並傳回此分層運算子。否則，傳回目前的父節點 id 存取器，其預設值為

function parentId(d) {
  return d.parentId;
}

父節點 id 存取器會針對傳遞給 stratify 運算子 的輸入資料中的每個元素呼叫，並傳遞目前的資料 (d) 和目前的索引 (i)。然後會使用傳回的字串來識別節點與 id 之間的關係。對於根節點，父節點 id 應為未定義。（Null 和空字串等同於未定義。）輸入資料中必須只有一個根節點，且不能有循環關係。

stratify.path(path)

原始碼 · 如果指定了path，則將路徑存取器設定為給定的函式，並傳回此分層運算子。否則，傳回目前的父節點 id 存取器，其預設值為未定義。

如果設定路徑存取器，id 和 parentId 存取器會被忽略，並在路徑存取器傳回的斜線分隔字串上計算類 Unix 層級結構，必要時會推算父節點和 id。

例如，假設在本地目錄中執行 UNIX find 命令的輸出

const paths = [
  "axes.js",
  "channel.js",
  "context.js",
  "legends.js",
  "legends/ramp.js",
  "marks/density.js",
  "marks/dot.js",
  "marks/frame.js",
  "scales/diverging.js",
  "scales/index.js",
  "scales/ordinal.js",
  "stats.js",
  "style.js",
  "transforms/basic.js",
  "transforms/bin.js",
  "transforms/centroid.js",
  "warnings.js",
];

您可以說

const root = d3.stratify().path((d) => d)(paths);