How to create table in d3 using a json key, key, value?

0

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;
   });
    
asked by anonymous 27.03.2018 / 18:59

0 answers