原創 - d3.js hierarchyc的常見數據結構

d3.js hierarchy的常見數據結構

1. d3.hierarchy(data, [children])

根據指定的層級數據構造一個根節點。指定的數據必須是代表根節點的對象，例如：

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

將為每個數據調用指定的子訪問器函數，從根節點開始，必須返回一個可迭代數據代表孩子，如有的話。如果子訪問器沒有指定，默認情況下：

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

如果數據是映射，它將被隱式地轉換為【undefined, data】條目，子訪問器默認為：

function children(d){
    return Array.isArray(d) ? d[1] : null
}

允許你通過d3.group或d3.rollup結果給d3.hierarchy。

返回的結果和每個后代有下列屬性：

• node.data 指定給構造函數的關聯數據
• node.depath 根節點為0，每個后代增加1
• node.height 葉節點為0，內部節點到任何后代葉子的最大距離
• node.parent
• node.children
• node.value 當前節點和后代的累加值

1.1 index.d.ts中

1.1.1 hierarchy()

export function hierarchy<Datum>(data: Datum, children?: (d: Datum) => (Datum[] | null | undefined))： HierarchyNode<Datum>;

1.1.2 Hierarchy

export interface HierarchyNode<Datum> {
    data: Datum;
    readonly depth: number;
    readonly height: number;
    parent: this | null;
    children?: this[];
    readonly value?: number;
    readonly id?: string;
    
    xxxx funcion
    xxx funcion
}

parent: this | null， 中的this代表HierarchyNode

1.1.3 HierarchyLink

export interface HierarchyLink<Datum> {
    source: HierarchyNode<Datum>;
    target: HierarchyNode<Datym>;
}

源碼這里上下文都沒有關於這個數據結構的說明，我猜想模擬鏈子來連接節點的。HierarchyNode.links(): Array<HierarchyLink >驗證了我的想法。

Returns an array of links for this node, where each link is an object that defines source and target properties。
The source of each link is the parent node, and the target is a child node。

為當前節點返回一個鏈接的數組，每個鏈接是一個定義了源和目標屬性的對象。
源是每個鏈子的父節點，目標是孩子節點。

1.1.2 ClusterLayout

export interface ClusterLayout<Datum>{
    (root: HierarchyNode<Datum>): HierarchyPointNode<Datum>
    
    xxx function;
    xxx function;
}

1.1.2.1 HierarchyPointNode

export interface HierarchyPointNode<Datum> extends HierarchyNode<Datum> {
    x: number;
    y: number;
    links(): Array<HierarchyPointLink<Datum>>;
}

• x： 節點的x坐標
• y： 節點的y坐標

1.1.3 TreemapLayout

export interface TreemapLayout<Datum> {
    (root: HierarchyNode<Datum>): HierarchyRectangularNode<Datum>;
    
    xxx function;
    xxx function;
}

1.1.3.1 HierarchyRectangularNode

export interface HierarchyRectangularNode<Datum> extends HierarchyNode<Datum> {
    x0: number;
    y0: number;
    x1: number;
    y1: number;
    
    links(): Array<HierarchyRecangularLink<Datum>>
}

• x0: 矩形的左邊緣
• y0: 矩形的上邊緣
• x1: 矩形的右邊緣
• y1: 矩形的下邊緣

原文地址：https://www.cnblogs.com/xiaoxu-xmy/p/13771461.html
GitHub: https://github.com/lemon-Xu/Learning-d3.-Js
作者： lemon