I wanted to create a table in d3.js and by data in json
within the table, my json
is as follows:
freqData=[
{State:'2004',freq: {Diabetes:30, Alzheimer:0, Cancer:920, Others:0}}
,{State:'2005',freq:{Diabetes:400, Alzheimer:410, Cancer:0, Others:125}}
,{State:'2006',freq:{Diabetes:400, Alzheimer:437, Cancer:260, Others:2000}}
,{State:'2007',freq:{Diabetes:1061, Alzheimer:319, Cancer:1822, Others:0}}
];
I tried this way but it only works for json key, value and not like I have:
var sortAscending = true;
var table = d3.select('#page-wrap').append('table');
var titles = tF2.map(function(d) { return d; });
var headers = table.append('thead').append('tr')
.selectAll('th')
.data(titles).enter()
.append('th')
.style('background-color', function(d) { return segColor(d.type); } )
.text(function (d) { return d.type; })
.on('click', function (d) {
headers.attr('class', 'header');
if (sortAscending) {
rows.sort(function(a, b) { return d3.ascending(a[d], b[d]); });
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) { return d3.descending(a[d], b[d]); });
sortAscending = true;
this.className = 'des';
}
});
console.log(titles);
var rows = table.append('tbody').selectAll('tr')
.data(sF4).enter()
.append('tr');
rows.selectAll('td')
.data(function (d) {
return d3.keys(st.freq).map(function(s) {
return { 'value': d[k],'name': d };
});
}).enter()
.append('td')
.attr('data-th', function (d) {
return d.name;
})
.text(function (d) {
return d.value;
});