D3 Zoomable Treemap에서 어린이 액세서 바꾸기

Question

Mike Bostock의 확대/축소 가능한 트리 맵 http://bost.ocks.org/mike/treemap/을 한 가지 수정하여 사용하려고합니다. 중첩 된 JSON 데이터를 사용하는 대신 부모에서 자식 목록으로의 간단한 매핑이 있습니다. 나는 단순히 루트의 자식을 반환하는 getChildren (root) 함수를 만들었습니다. 루트에 자식이 없으면 null입니다.

나는 d.children()의 모든 인스턴스를 treemap javascript 파일의 getChildren (d)으로 바꾸려고했지만 제대로 작동하지 않는 것 같습니다.

결과 페이지의 주황색 막대가 정상적으로 위쪽으로 표시되지만 다른 것은 올바르게 표시되지 않습니다. 즉, 주황색 막대 아래에 사각형이없고 단지 빈 회색 공간입니다. 아이들의 모든 텍스트는 빈 회색 공간의 왼쪽 상단에 매시업되므로 좌표가 올바르게 지정되지 않았을 수 있습니다.

어떤 아이디어 ?? 감사합니다.

Answer 1

여기에 몇 가지 문제가 있었다처럼 보이는 :

이

• 귀하의 데이터 구조가 자식 노드를 참조하지 않는 것 : 내가 뭔가를 누락하지 않는 한

  var nMap = {}; 
  nMap.papa = {}; 
  nMap.papa["children"] = []; 
  nMap.papa["children"].push({ 
      "name": "c1" 
  }); 
  // snip 
  nMap.c1 = { 
      size: 5 
  }; 
  

  , 당신의 getChildren 함수는 { name: "c1" } 개체를 가져 오지만 nMap.c1을 조회하지 않습니다. 나는 당신의 다른 데이터 구조를 달성하기 위해 노력하고 정확히 확실하지 않다, 그러나 가장 확실한 옵션이 노드의 평면지도를 사용하는 것처럼이 같은 ID로 참조 아이들과 함께, 보인다

  var nMap = {}; 
  nMap.c1 = { 
      name: "c1", 
      value: 5 
  }; 
  nMap.c2 = { 
      name: "c2", 
      value: 5 
  }; 
  nMap.c3 = { 
      name: "c3", 
      value: 5 
  }; 
  nMap.papa = { 
      name: "papa", 
      children: ['c1', 'c2', 'c3'] 
  }; 
  

  으로

  function getChildren(par){ 
      var parName = par.name, 
       childNames = parName in nMap && nMap[parName].children; 
      if (childNames) { 
       // look up real nodes 
       return childNames.map(function(name) { return nMap[name]; }); 
      } 
  } 
  

• 아이들이 무게를 나타 내기 위해 size 대신 value의를 사용하고, 나머지 코드는 value 예상 (그래서 그들은 모든했다 :이 같은 구조는, 당신은 getChildren 함수에서 실제 아이들에게 매핑 할 수 있습니다 중량 : 0).

• treemap 레이아웃의 특수 버전을 사용하는 "확대 가능"트리 맵 접근법을 사용하고 있으므로 트리 맵 레이아웃의 .children 접근자를 지정할 필요가 없습니다. 대신, 사용자 정의 layout 도우미에서 사용자 정의 접근을 사용 : 여기

  function layout(d) { 
      // get the children with your accessor 
      var children = getChildren(d); 
      if (children && children.length > 0) { 
       treemap.nodes({ children: children }); 
       children.forEach(function(c) { 
        c.x = d.x + c.x * d.dx; 
        c.y = d.y + c.y * d.dy; 
        c.dx *= d.dx; 
        c.dy *= d.dy; 
        c.parent = d; 
        layout(c); 
       }); 
      } 
  } 
  

근무 바이올린 : http://jsfiddle.net/nrabinowitz/WpQCy/