Unable Tabellendaten aus dem Array anzuzeigen mit D3.js

Question

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; 
 
    });

\t * { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t } 
 
\t body { 
 
\t font: 14px/1.4 Georgia, Serif; 
 
\t } 
 
\t #page-wrap { 
 
\t margin: 50px; 
 
\t } 
 
\t p { 
 
\t margin: 20px 0; 
 
\t } 
 
\t /* 
 
\t Generic Styling, for Desktops/Laptops 
 
\t */ 
 
\t table { 
 
\t width: 100%; 
 
\t border-collapse: collapse; 
 
\t } 
 
\t /* Zebra striping */ 
 
\t tr:nth-of-type(odd) { 
 
\t background: #eee; 
 
\t } 
 
\t th { 
 
\t background: #333; 
 
\t color: white; 
 
\t font-weight: bold; 
 
\t cursor: s-resize; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 3% center; 
 
\t } 
 
\t td, 
 
\t th { 
 
\t padding: 6px; 
 
\t border: 1px solid #ccc; 
 
\t text-align: left; 
 
\t } 
 
\t th.des:after { 
 
\t content: "\21E9"; 
 
\t } 
 
\t th.aes:after { 
 
\t content: "\21E7"; 
 
\t } 
 
\t /* 
 
\t Max width before this PARTICULAR table gets nasty 
 
\t This query will take effect for any screen smaller than 760px 
 
\t and also iPads specifically. 
 
\t */ 
 
\t @media only screen and (max-width: 760px), 
 
\t (min-device-width: 768px) and (max-device-width: 1024px) { 
 
\t /* Force table to not be like tables anymore */ 
 
\t table, 
 
\t thead, 
 
\t tbody, 
 
\t th, 
 
\t td, 
 
\t tr { 
 
\t  display: block; 
 
\t } 
 
\t /* Hide table headers (but not display: none;, for accessibility) */ 
 
\t thead tr { 
 
\t  position: absolute; 
 
\t  top: -9999px; 
 
\t  left: -9999px; 
 
\t } 
 
\t tr { 
 
\t  border: 1px solid #ccc; 
 
\t } 
 
\t td { 
 
\t  /* Behave like a "row" */ 
 
\t  border: none; 
 
\t  border-bottom: 1px solid #eee; 
 
\t  position: relative; 
 
\t  padding-left: 50%; 
 
\t } 
 
\t td:before { 
 
\t  /* Now like a table header */ 
 
\t  position: absolute; 
 
\t  /* Top/left values mimic padding */ 
 
\t  top: 6px; 
 
\t  left: 6px; 
 
\t  width: 45%; 
 
\t  padding-right: 10px; 
 
\t  white-space: nowrap; 
 
\t } 
 
\t /* 
 
\t \t Label the data 
 
\t \t */ 
 
\t td:before { 
 
\t  content: attr(data-th)": "; 
 
\t  font-weight: bold; 
 
\t  width: 6.5em; 
 
\t  display: inline-block; 
 
\t } 
 
\t } 
 
\t /* Smartphones (portrait and landscape) ----------- */ 
 
\t @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
 
\t body { 
 
\t  padding: 0; 
 
\t  margin: 0; 
 
\t  width: 320px; 
 
\t } 
 
\t } 
 
\t /* iPads (portrait and landscape) ----------- */ 
 
\t @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
 
\t body { 
 
\t  width: 495px; 
 
\t } 
 
\t } 
 
\t

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

Hallo, ich bin neu in D3. Ich bin wirklich an einem Punkt fest, um eine d3 Tabelle mit meinem Datensatz zu zeichnen. Bitte hilf mir. Ich bin in der Lage, nur die Überschriften aber keine Daten für die Überschriften in den Tabellenreihen zu erhalten. Ich weiß nicht, welchen Fehler ich dabei mache. Bitte schlage mir etwas vor. Danke im Voraus.

Answer 1

versuchen, das letzte Bit Wechsel von

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; 
    }); 

'Titel' ist ein Array; Sie benötigen die Indizes, um auf jeden Dateneintrag zuzugreifen.