使用D3製作一組嵌套/分層表格

我有一些數據，我想使用d3在html表格中顯示。我的數據佈局是這樣的：使用D3製作一組嵌套/分層表格

var dataset = [ 
    { 
     'name': 'foo', 
     'children': [ 
      { 
       'var1': 'hello', 
       'var2': 87, 
       ... 
      }, 
      {...}, 
      {...} 
     ] 
    }, 
    { 
     'name': 'bar', 
     'children': [ 
      { 
       'var1': 'howdy', 
       ... 
      }, 
      {...}, 
     ] 
    }, 
    { 
     // and so on... 
    } 
]

最後，我想在風格/功能類似的東西this example，用戶可以點擊「富」行，看到「富」一切組。但現在我努力顯示數據。

我做了一點jsfiddle來顯示我現在在哪裏。正如你所看到的，我迄今爲止沒有成功顯示我的數據中的任何實際數字。有沒有人對我應該如何去做這件事有任何想法？我應該重組dataset嗎？謝謝

== ==編輯

我必須爲可能是含糊什麼，我試圖做的道歉。這是我最終想要實現的mock up，儘管我強調這個問題更多的是綁定數據而不是佈局/轉換的東西。

來源

2013-07-29 moarCoffee

我不確定是否正確理解您的要求。你是否想要基本上把HTML表格放在你鏈接的例子中的圈子中？如果是這樣，最簡單的可能是以類似的風格創建JSON並修改該示例。 –

@LarsKotthoff爲了美觀，我舉了很多例子。那可能嗎？說實話，代碼真的讓我困惑，但我會盡力去做。 – moarCoffee

是的，那是可能的。我仍然不確定你實際想要達到什麼。你可以做一個模型嗎？ –

這裏是我會做：http://jsfiddle.net/j43Nb/

在你的數據來看，它似乎更適合讓每個家長一個表，每名兒童一排，而不是包裹在一個大表整個事情。如果你真的需要一個大表，只需用另一個表/ tr/td序列替換div.section/h4位即可。

理解「子」對象如何成爲單元數據的陣列的關鍵是在該位末：

var cells = rows.selectAll('td') 
    .data(function(d) { 
     // return cell data as an array of prop values, 
     // ordered according to prop names in cols 
     return cols.map(function(prop) { 
      return d[prop]; 
     }) 
    });

其中cols字段名稱用於建立單元值的對應陣列爲每個給定的行（子）。

來源

2013-07-29 20:25:03

謝謝雷！這是一個巨大的幫助 – moarCoffee

使用D3製作一組嵌套/分層表格

回答

相關問題