[D3] Stratify(링크 트리) 사용법

테이블 데이터를 계층 구조로 CSV 파일로 명확하게 나타낼 수 있습니다.

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

d3.csvParse를 사용하여 scv를 구문 분석할 수 있습니다.

var table = d3.csvParse(text);

결과

[
  {"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"}
]

계층 구조로 변환하려면 다음을 수행해야합니다.

var root = d3.stratify()
    .id(function(d) { return d.name; })
    .parentId(function(d) { return d.parent; })
    (table);

이제 시각화를 위해 d3.tree와 같은 계층적 레이아웃으로 전달할 수 있습니다.

d3.stratify()

기본 설정을 사용하여 새로운 층화 연산자를 구성합니다.

stratify(data)

지정된 표 형식 데이터에서 새 계층 구조를 생성합니다.

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

stratify.id(id)

id가 지정된 경우 id 접근자를 지정된 함수로 설정하고 계층화 연산자를 반환합니다. 현재 데이터와 인덱스가 전달됩니다. 반환된 문자열은 parent id와 함께 노드의 관계 식별하는데 사용됩니다. 리프 노드의 경우 ID가 정의되지 않을 수 있습니다.

stratify.parentId(parentId)

parentId가 지정된 경우 상위 ID 접근자를 지정된 함수로 설정 후 반환합니다. 문자열 id와 함께 노드의 관계를 식별하는 데 사용됩니다. 루트 노드의 경우 상위 id는 정의되지 않아야됩니다.

stratify.path(path)

path가 지정된 경우 경로 접근자를 지정된 함수로 설정하고 반환합니다. 파일구조처럼 슬래시로 구분된 경로 문자열에 유용합니다.

const stratify = d3.stratify()
    .path(d=>d)(['a/b','a/c','a/b/d'])