無法使用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>

你好，我是新來D3從陣列顯示錶中的數據。我真的被困在使用我的數據集繪製d3表的一點上。請幫幫我。我只能得到表頭行中的標題但沒有數據。我不知道我在這做什麼錯誤。請給我一些建議。提前致謝。

Answer 1

嘗試從

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

改變的最後一位到 -

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

'標題' 是一個數組;您將需要索引來訪問每個數據條目。