原创 - d3.js hierarchyc的常见数据结构

2022-07-21 11:22:30

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