D3 Zoomable Treemap改變兒童訪問器

Question

我想用Mike Bostock的可縮放樹形圖http://bost.ocks.org/mike/treemap/進行一次修改。我沒有使用嵌套的JSON數據，而是從父母到孩子列表的簡單映射。我構建了一個函數getChildren（root），它只是返回root的子項;如果root沒有任何子項，則返回null。

我試圖用樹形圖JavaScript文件中的getChildren（d）替換d.children（）的所有實例，但似乎它無法正常工作。

生成的頁面顯示橙色欄爲常規頂部，但沒有其他東西正確顯示（即橙色欄下方沒有矩形，只是空的灰色空間）。所有來自孩子的文字都被置於空白灰色空間的左上角，因此可能是座標未被正確分配。

任何想法?? 謝謝！

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'] 
  }; 
  

  隨着這樣的結構，可以映射到真正的孩子在getChildren功能：

  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（所以他們都有重量0）。

• 由於您使用的是使用樹圖佈局的專用版本的「可縮放」樹形圖方法，因此不需要指定樹圖佈局的.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/