拼合與d3.js嵌套

我試圖想象團隊協作的數據，在這樣的方式創建的對象的層次結構：拼合與d3.js嵌套

Chart that displays the share of the different collaboration artifact types for each team and week

不同顏色的圖表中有不同的協作工件類型。

從源中的數據是這樣的：

var json = [ 
    { 
     "teamLabel": "Team 1", 
     "created_date": "2013-01-09", 
     "typeLabel": "Email" 
     "count": "5" 
    }, 
    { 
     "teamLabel": "Team 1", 
     "created_date": "2013-01-10", 
     "typeLabel": "Email" 
     "count": "7" 
    }, 
    /* and of course, a lot more data of this kind */ 
]

注意，數據是單天定。因此，對於上面的可視化，我需要根據一年中的第一週來彙總數據。團隊名稱和工件類型需要保留，並用作分組屬性。代碼如下：

// "2013-01-09" 
var dateFormat = d3.time.format.utc("%Y-%m-%d"); 

// "2013-02" for the 2nd week of the year 
var yearWeek = d3.time.format.utc("%Y-%W"); 

var data = d3.nest().key(function(d) { 
     return d.teamLabel; 
    }).key(function(d) { 
     var created_date = dateFormat.parse(d.created_date); 
     return yearWeek(created_date); 
    }) 
    .key(function(d) { 
     return d.typeLabel; 
    }).rollup(function(leaves) { 
     return d3.sum(leaves, function(d) { 
       return parseInt(d.count); // parse the integer 
      }); 
     } 
    ) 
    .map(json);

這會導致基於嵌套鍵的對象層次結構。我不知道如何從這個上面的圖表，所以我寧願尋找一種方式來data轉換成以下結構：

[ 
    // This list contains an element for each donut 
    { 
     "teamLabel": "Team 1", 
     "createdWeek": "2013-02", 
     "values": [ 
      // This list contains one element for each type we found 
      { 
       "typeLabel": "Email", 
       "count": 12 
      }, 
      { 
      ... 
      } 
     ] 
    }, 
    { 
    ... 
    } 
]

這樣一來，我可以使用createdWeek和teamLabel爲x上的定位 - 和y軸，並且values下的信息可以傳遞到d3.layout.pie()。

有沒有一種乾淨的方式來做這種數據轉換？如果您需要任何澄清或進一步的細節，請讓我知道。

來源

2013-01-11 cyroxx

你有沒有找到如何去做這個？ –

@cyroxx我不知道我理解你的問題;你想將你提交的'json'數據轉換爲按隊列分組的新陣列格式？ – hitautodestruct

我很困惑你爲什麼稱之爲扁平化，看起來你正在爲最初的扁平數據添加圖層。（我正在尋找拼合嵌套數據集。） – punstress

這是你怎麼做：

var flat = data.entries().map(function(d){ 
    return d.value.entries().map(function(e){ 
     return { 
      "teamLabel": d.key, 
      "createdWeek": e.key, 
      "values": e.value.entries().map(function(f){ 
       return {"typeLabel": f.key, "count": f.value} 
      }) 
     } 
    }) 
}).reduce(function(d1,d2){ return d1.concat(d2) },[]);

請注意，我在爲了使用map.entries（）輔助函數使用標準的JavaScript對象的d3.map代替。我想這就是你試圖通過的事實，你正在使用判斷什麼：

.map(json); // whereas I used .map(json, d3.map)

，而不是

.entries(json);

的jsfiddle鏈接在這裏：

http://jsfiddle.net/RFontana/KhX2n/

來源

2013-10-22 12:40:26 Renaud

你的鏈接不顯示正確的json？ – thatOneGuy

拼合與d3.js嵌套

回答

相關問題