d3 v4 : x 및 y에 대해 트리 맵에서 NaN을 제공합니다.

Question

d3.stratify을 사용하여 계층화 한 일부 트리 구조 데이터가 있습니다. 이는 적절한 데이터 구조 (자식, 데이터 및 부모 있음)를 가정합니다. 그러나 d3.tree()을 통해 전달하면 x 및 y 값은 모두 NaN이므로이를 플로팅 할 수 없습니다. 내가 본 예를 기반으로, 나는 d3.hierarchy()을 실행할 필요가 없다. 왜냐하면 stratify이 나에게 그렇게하기 때문에, 어쨌든 성공하지 않고 hierarchy()을 사용해 보았다.

여기에 데이터를 붙이기 위해 JSON.stringify(data)을 시도했지만 순환 형 구조체를 JSON으로 변환 할 수 없다는 오류가 발생하여 작동하지 않았습니다. 내가 아는 바로는 각 레이어 (위의 레이어 제외)는 children 배열, data 개체 및 parent 개체를 갖고 있으므로 모두 옳은 것처럼 보입니다.

편집 : 일부 테스트 데이터 (from this link)를 시도했지만 여전히 x 및 y에 대해 NaN이 표시됩니다. treeData를 복사하고 d3.hierarchy에 넣은 다음이 tree() 호출을 통해 넣습니다. x와 y는 여전히 NaN입니다.

var treeMap = d3.tree() 
       .size(width, height2); // 1020, 170 in my case. 

var treeData = 
    { 
    "name": "Top Level", 
    "children": [ 
     { 
     "name": "Level 2: A", 
     "children": [ 
      { "name": "Son of A" }, 
      { "name": "Daughter of A" } 
     ] 
     }, 
     { "name": "Level 2: B" } 
    ] 
    }; 

treeData = d3.hierarchy(treeData, function(d) { return d.children; }); 
var nodes = treeMap(treeData); // gives NaN x and y values. 

Answer 1

아하, 너무 단순하지만 어리 석다. ([height, width])을 전달하는 대신에 나는 (height, width)을 트리 함수에 전달 했으므로 물론 너무 격렬하게 실패했습니다. 적절한 배열을 지정하면 모든 것이 수정됩니다.