我們如何使用d3和crossfilter javascript框架創建使用多個數組JSON的多列表

我想使用crossfilter過濾並希望使用d3創建多列表。我有一個JSON文件從表中獲取數據。我們如何使用d3和crossfilter javascript框架創建使用多個數組JSON的多列表

我的JSON數組如下所示，我想使用crossfilter對這些元素進行分組，並使用d3渲染表。

var myJSON = { 
    Region [{ 
     code : New-York, 
     id : 1, 
     centre : [{ 
      name: xxx, 
      id : 11 
      },{ 
      name: yyy, 
      id : 12, 
      },{ 
      name: zzz, 
      id : 13, 
      }] 
     },   
     code : Florida, 
     id : 2, 
     centre : [{ 
      name: aaa, 
      id : 21 
      },{ 
      name: bbb, 
      id : 23, 
      }] 
     }, 
     code : Tennessee, 
     id : 3, 
     centre : [{ 
      name: ccc, 
      id : 31 
      }, { 
      name: ddd, 
      id : 32, 
      }, { 
      name: eee, 
      id : 33, 
      }, { 
      name: fff, 
      id : 34, 
      }] 
     } 
    }] 
}

HTML頁面

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <title>D3: Subselection Example</title> 
    <script type="text/javascript" src="d3.js"></script> 
    <style type="text/css"> 

    body { 
     font: 13px sans-serif; 
    } 
    td, th { 
    padding: 1px 25px 0px 1px; 
    border: 1px black solid; 
    width:80px; 
} 
ul { 
    list-style: none; 
    font-weight: bold; 
} 

li { 
    margin: 0.2em 0.0em; 
    padding: 0.5em 1.0em; 
    font-weight: normal; 
} 

</style> 
</head> 
<body> 
<script type="text/javascript"> 
d3.json("Udashboard.json", function (error,data) { 

function tabulate(data, columns) { 
    var table = d3.select('body').append('table') 
    var thead = table.append('thead') 
    var tbody = table.append('tbody'); 

// append the header row 
thead.append('tr') 
.selectAll('th') 
.data(columns).enter() 
.append('th') 
.text(function (column) { return column.id; }); 

// create a row for each object in the data 
var rows = tbody.selectAll('tr') 
.data(data.objects) 
.enter() 
.append('tr'); 

// create a cell in each row for each column 
var cells = rows.selectAll('td') 
.data(function (row) { 
    return columns.map(function (column) { 
     return { column: column.id, value: eval('row.'+column.key) }; 
    }); 
}) 
.enter() 
.append('td') 
.text(function (d) { return d.value; }); 

return table; 
} 

var columnFields = [ { id: "ID", key: "id" }, 
{ id: "Code", key: "region[0].code" }, 
{ id: "Name", key: "centre[0].name" } ]; 

console.log (data); 
// render the table(s) 
tabulate(data, columnFields); // 2 column table 
}); 

</script> 

</body> 
</html>

我想在一個表中顯示如下的結果。

Regiion New-York Florida Tennessee  
    3   3   2   4

我們怎樣才能做到這一點使用crossfilter JS和JS D3。

任何幫助將被接受。

在此先感謝

來源

2014-10-04 DevGo

誰能給我一個幫助？ – DevGo 2014-10-10 06:46:21

這是一個容易的！ :)

僞代碼：

data = [] 
for each region 
for each centre 
    data.push(one data object like {region: "...", ...}) 
c = crossfilter(data) 
r = c.dimension(function returning region name) 
g = r.group(String) 
allRegionsHist = g.top(Infinity) 
for each allRegionsHist 
construct one column

來源

2014-12-04 14:39:29 pkopac

我們如何使用d3和crossfilter javascript框架創建使用多個數組JSON的多列表

回答

相關問題