javascript - 如何在表头和行中显示嵌套的 JSON 值

Question

我想按照屏幕截图在表头和行中显示嵌套的 JSON 值。

但是，我当前的代码显示如下。

如何获取第一张截图的结果？

这是我的代码:

var tbl_ss564_ib_jsonData = [
	{
		"S_No": "1",
		"SS564 Metric": "Power Usage Effectiveness(PUE)",
		"Baseline": "2.2*",
		"DC": [	
				{"A": "2.4"},
				{"B": "2.61"},
				{"C": "2.46"},
				{"D": "2.25"},
				{"E": "2.11"},
				{"F": "3.75"},
				{"G": "2.08"},
				{"H": "2.17"},
				{"I": "1.85"},
				{"J": "2.57"},
				{"K": "2.42"}
			]
	}
]
		  
		  var sortAscending = true;
		  var tbl_ss564_ib = d3.select('#ss564_ib_page_wrap').append('table');
		  var title_ss564_ib = d3.keys(tbl_ss564_ib_jsonData[0]);
		  var header_ss564_ib = tbl_ss564_ib.append('thead').append('tr')
		                   .selectAll('th')
		                   .data(title_ss564_ib).enter()
		                   .append('th')
		                   .text(function (d) {
			                    return d;
		                    })
		                   .on('click', function (d) {
		                	   header_ss564_ib.attr('class', 'header');
		                	   
		                	   if (sortAscending) {
		                	     rows.sort(function(a, b) { return b[d] < a[d]; });
		                	     sortAscending = false;
		                	     this.className = 'aes';
		                	   } else {
		                		 rows.sort(function(a, b) { return b[d] > a[d]; });
		                		 sortAscending = true;
		                		 this.className = 'des';
		                	   }
		                	   
		                   });
		  
		  var rows = tbl_ss564_ib.append('tbody').selectAll('tr')
		               .data(tbl_ss564_ib_jsonData).enter()
		               .append('tr');
		  rows.selectAll('td')
		    .data(function (d) {
		    	return title_ss564_ib.map(function (k) {
		    		return { 'value': d[k], 'name': k};
		    	});
		    }).enter()
		    .append('td')
		    .attr('data-th', function (d) {
		    	return d.name;
		    })
		    .text(function (d) {
		    	return d.value;
		    });

* { 
	  margin: 0; 
	  padding: 0; 
     }
   #ss564_ib_page_wrap  body { 
	   font: 14px/1.4 Georgia, Serif; 
     }
    #ss564_ib_page_wrap {
	  margin: 20px;
    }
    p {
	 margin: 20px 0; 
    }

	/* 
	Generic Styling, for Desktops/Laptops 
	*/
	#ss564_ib_page_wrap table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* Zebra striping */
	#ss564_ib_page_wrap tr:nth-of-type(odd) { 
		background: #eee; 
	}
	#ss564_ib_page_wrap th { 
		background: Teal;
		font-weight: bold; 
		cursor: s-resize;
		background-repeat: no-repeat;
        background-position: 3% center;
	}
	#ss564_ib_page_wrap	td, th { 
		padding: 6px; 
		border: 1px solid #ccc; 
		text-align: left; 
	}
	
	#ss564_ib_page_wrap	th.des:after {
      content: "\21E9";
    }
    
	#ss564_ib_page_wrap  th.aes:after {
      content: "\21E7";
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
	<div id="ss564_ib_page_wrap">	</div>

Answer 1

在不更改 D3 代码的情况下，最简单的解决方案就是预先处理数据数组:

tbl_ss564_ib_jsonData[0].DC.forEach(function(d, i) {
    for (var key in d) {
        tbl_ss564_ib_jsonData[0][key] = d[key];
    }
});

delete tbl_ss564_ib_jsonData[0].DC;

这里是你的代码有那个变化:

var tbl_ss564_ib_jsonData = [{
  "S_No": "1",
  "SS564 Metric": "Power Usage Effectiveness(PUE)",
  "Baseline": "2.2*",
  "DC": [{
      "A": "2.4"
    },
    {
      "B": "2.61"
    },
    {
      "C": "2.46"
    },
    {
      "D": "2.25"
    },
    {
      "E": "2.11"
    },
    {
      "F": "3.75"
    },
    {
      "G": "2.08"
    },
    {
      "H": "2.17"
    },
    {
      "I": "1.85"
    },
    {
      "J": "2.57"
    },
    {
      "K": "2.42"
    }
  ]
}];

tbl_ss564_ib_jsonData[0].DC.forEach(function(d, i) {
  for (var key in d) {
    tbl_ss564_ib_jsonData[0][key] = d[key];
  }
});

delete tbl_ss564_ib_jsonData[0].DC;

var sortAscending = true;
var tbl_ss564_ib = d3.select('#ss564_ib_page_wrap').append('table');
var title_ss564_ib = d3.keys(tbl_ss564_ib_jsonData[0]);
var header_ss564_ib = tbl_ss564_ib.append('thead').append('tr')
  .selectAll('th')
  .data(title_ss564_ib).enter()
  .append('th')
  .text(function(d) {
    return d;
  })
  .on('click', function(d) {
    header_ss564_ib.attr('class', 'header');

    if (sortAscending) {
      rows.sort(function(a, b) {
        return b[d] < a[d];
      });
      sortAscending = false;
      this.className = 'aes';
    } else {
      rows.sort(function(a, b) {
        return b[d] > a[d];
      });
      sortAscending = true;
      this.className = 'des';
    }

  });

var rows = tbl_ss564_ib.append('tbody').selectAll('tr')
  .data(tbl_ss564_ib_jsonData).enter()
  .append('tr');
rows.selectAll('td')
  .data(function(d) {
    return title_ss564_ib.map(function(k) {
      return {
        'value': d[k],
        'name': k
      };
    });
  }).enter()
  .append('td')
  .attr('data-th', function(d) {
    return d.name;
  })
  .text(function(d) {
    return d.value;
  });

* {
  margin: 0;
  padding: 0;
}

#ss564_ib_page_wrap body {
  font: 14px/1.4 Georgia, Serif;
}

#ss564_ib_page_wrap {
  margin: 20px;
}

p {
  margin: 20px 0;
}


/* 
	Generic Styling, for Desktops/Laptops 
	*/

#ss564_ib_page_wrap table {
  width: 100%;
  border-collapse: collapse;
}


/* Zebra striping */

#ss564_ib_page_wrap tr:nth-of-type(odd) {
  background: #eee;
}

#ss564_ib_page_wrap th {
  background: Teal;
  font-weight: bold;
  cursor: s-resize;
  background-repeat: no-repeat;
  background-position: 3% center;
}

#ss564_ib_page_wrap td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

#ss564_ib_page_wrap th.des:after {
  content: "\21E9";
}

#ss564_ib_page_wrap th.aes:after {
  content: "\21E7";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="ss564_ib_page_wrap"> </div>