Question

＆＃13;

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

＆＃13;

	* {
	  margin: 0;
	  padding: 0;
	}
	body {
	  font: 14px/1.4 Georgia, Serif;
	}
	#page-wrap {
	  margin: 50px;
	}
	p {
	  margin: 20px 0;
	}
	/* 
	Generic Styling, for 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 this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px) {
	  /* Force table to not be like tables anymore */
	  table,
	  thead,
	  tbody,
	  th,
	  td,
	  tr {
	    display: block;
	  }
	  /* Hide table headers (but not display: none;, for accessibility) */
	  thead tr {
	    position: absolute;
	    top: -9999px;
	    left: -9999px;
	  }
	  tr {
	    border: 1px solid #ccc;
	  }
	  td {
	    /* Behave  like a "row" */
	    border: none;
	    border-bottom: 1px solid #eee;
	    position: relative;
	    padding-left: 50%;
	  }
	  td:before {
	    /* Now like a table header */
	    position: absolute;
	    /* Top/left values mimic padding */
	    top: 6px;
	    left: 6px;
	    width: 45%;
	    padding-right: 10px;
	    white-space: nowrap;
	  }
	  /*
		Label the data
		*/
	  td:before {
	    content: attr(data-th)": ";
	    font-weight: bold;
	    width: 6.5em;
	    display: inline-block;
	  }
	}
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	  body {
	    padding: 0;
	    margin: 0;
	    width: 320px;
	  }
	}
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	  body {
	    width: 495px;
	  }
	}

＆＃13;

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

＆＃13;

您好我是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;
  });

＆＃39;标题＆＃39;是一个数组;您将需要索引来访问每个数据条目。

无法使用D3.js显示数组中的表数据

1 个答案: