SVG D3.js - 陣列數據地圖 ( d3.map )

d3.map 這個其實我找不到合適的翻譯,只好暫時用我的破英文翻譯成「陣列數據地圖」,雖然有地圖兩個字,但跟實際的地圖卻是沒啥關聯性,主要是利用 d3.map 的 API,可以幫助我們把一連串的數據做轉換,與之前提過的巢狀數據處理有異曲同工之妙,d3.map 會根據我們所下的條件,把特定的值取出成為 key 而成為一個新的陣列,也可藉由 get、has 或 set 的 API 對數據做判斷或重新設定,在許多的 D3.js 圖形與數據的處理中,d3.map 都扮演了相當中要的腳色。

參考:SVG D3.js - 巢狀數據結構 ( d3.nest )

範例數據

要處理數據,就一定要先有數據,以下是這篇文章會用到的範例數據:

var data = [
  {name:'Tom'   , type:['a','b','c']},
  {name:'Jack'  , type:['b,c']},
  {name:'Owen'  , type:['c','d','e']},
  {name:'Mark'  , type:['a','c']},
  {name:'Marry' , type:['a','b','c','d']},
  {name:'Rock'  , type:['a','c']},
  {name:'Jason' , type:['b','c']},
  {name:'Peter' , type:['a','b','c']},
  {name:'Cherry', type:['c','d']},
  {name:'Jean'  , type:['a','c','d']}
];

d3.map API

而這篇將會介紹 d3.map 的 API 如下:

  • d3.map([object][, key])
  • map.has(key)
  • map.get(key)
  • map.set(key, value)
  • map.remove(key)
  • map.keys()
  • map.values()
  • map.size()
  • map.empty()
  • map.forEach(function)

小結

以上就是 d3.map 的相關介紹,當然我們也可以直接對我們的數據下 map,例如以下的範例,就可以直接回傳 key 成為一個陣列,之後撰寫與 d3.js 有關的範例文章,也將會大量地使用 d3.map,這也是學習 d3.js 一定要會的部分喔。( 範例:svg-d3-07-data-map-demo11.html )

var i = data.map(function(d){return d.name;});

console.log(i);

SVG D3.js - 陣列數據地圖 ( d3.map )

有興趣瞧瞧其他新文章嗎?