javascript - Unable to display table data from array using D3.js -

var data = [    ["first name", "last name", "job title", "favorite color", "wars or trek?", "porn name", "date of birth", "dream vacation city", "gpa", "arbitrary data"],    ["james,matman", "chief sandwich eater", "lettuce green", "trek,digby green", "january 13, 1979", "gotham city", "3.1", "rbx-12"],    ["the", "tick", "crimefighter sorta", "blue", "wars", "john smith", "july 19, 1968", "athens", "n/a", "edlund, ben (july 1996)."]  ];    var sortascending = true;    var titles = data[0];    var table = d3.select('#page-wrap')    .append('table');    var headers = table.append('thead')    .append('tr')    .selectall('th')    .data(titles)    .enter()    .append('th')    .text(function(d) {      return d;    })    .on('click', function(d) {      headers.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 = table.append('tbody')    .selectall('tr')    .data(data)    .enter()    .append('tr');    rows.selectall('td')    .data(function(d) {      return titles.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;  	}  	body {  	  font: 14px/1.4 georgia, serif;  	}  	#page-wrap {  	  margin: 50px;  	}  	p {  	  margin: 20px 0;  	}  	/*   	generic styling, desktops/laptops   	*/  	table {  	  width: 100%;  	  border-collapse: collapse;  	}  	/* zebra striping */  	tr:nth-of-type(odd) {  	  background: #eee;  	}  	th {  	  background: #333;  	  color: white;  	  font-weight: bold;  	  cursor: s-resize;  	  background-repeat: no-repeat;  	  background-position: 3% center;  	}  	td,  	th {  	  padding: 6px;  	  border: 1px solid #ccc;  	  text-align: left;  	}  	th.des:after {  	  content: "\21e9";  	}  	th.aes:after {  	  content: "\21e7";  	}  	/*   	max width before particular table gets nasty  	this query take effect screen smaller 760px  	and ipads specifically.  	*/  	@media screen , (max-width: 760px),  	(min-device-width: 768px) , (max-device-width: 1024px) {  	  /* force table not tables anymore */  	  table,  	  thead,  	  tbody,  	  th,  	  td,  	  tr {  	    display: block;  	  }  	  /* hide table headers (but not display: none;, accessibility) */  	  thead tr {  	    position: absolute;  	    top: -9999px;  	    left: -9999px;  	  }  	  tr {  	    border: 1px solid #ccc;  	  }  	  td {  	    /* behave  "row" */  	    border: none;  	    border-bottom: 1px solid #eee;  	    position: relative;  	    padding-left: 50%;  	  }  	  td:before {  	    /* table header */  	    position: absolute;  	    /* top/left values mimic padding */  	    top: 6px;  	    left: 6px;  	    width: 45%;  	    padding-right: 10px;  	    white-space: nowrap;  	  }  	  /*  		label data  		*/  	  td:before {  	    content: attr(data-th)": ";  	    font-weight: bold;  	    width: 6.5em;  	    display: inline-block;  	  }  	}  	/* smartphones (portrait , landscape) ----------- */  	@media screen , (min-device-width: 320px) , (max-device-width: 480px) {  	  body {  	    padding: 0;  	    margin: 0;  	    width: 320px;  	  }  	}  	/* ipads (portrait , landscape) ----------- */  	@media screen , (min-device-width: 768px) , (max-device-width: 1024px) {  	  body {  	    width: 495px;  	  }  	}  	

<div id="page-wrap"></div>  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

hello new d3. stuck @ point draw d3 table using dataset. please me. able headers no data headers in table rows. don't know error doing in this. please suggest me something. in advance.

try changing last bit

rows.selectall('td')   .data(function(d) {     return titles.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;   }); 

to -

rows.selectall('td')   .data(function(d) {     return titles.map(function(k,i) {       return {         'value': d[i],         'name': k       };     });   })   .enter()   .append('td')   .attr('data-th', function(d) {     return d.name;   })   .text(function(d) {     return d.value;   }); 

'titles' array; need indices access each data-entry.