Question

我想使用crossfilter进行过滤，并希望使用d3创建一个多列表。我有一个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和d3 js来做到这一点。

任何帮助都会被接受。

提前致谢

Answer 1

这很简单！：）

伪代码：

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

我们如何使用d3和crossfilter javascript框架使用多数组JSON创建多列表

1 个答案: