d3.js CSV 到 HTML 表格 - 标题、平均值和图表

Question

这是主要代码：https://gist.github.com/ndarville/7075823

<script src="d3.min.js?v=3.2.8"></script>

<script type="text/javascript"charset="utf-8">
    d3.text("data.csv", function(data) {
        var parsedCSV = d3.csv.parseRows(data);
        var container = d3.select("body")
            .append("table")
            .selectAll("tr")
                .data(parsedCSV).enter()
                .append("tr")
            .selectAll("td")
                .data(function(d) { return d; }).enter()
                .append("td")
                .text(function(d) { return d; });
    });
</script>

我希望您补充一些内容。如果可能的话。

• 是否可以使用 tbody、thead 和 tfoot 标签？ /重要！
• 能否在每列下添加一条可以自动计算的平均线？
• 我们可以在每列下添加一个简单的图表吗？

谢谢。

CSV 的内容：

car name,miles/gallon,cylinders,displacement,horsepower,weight,acceleration,model year,origin
"chevrolet chevelle malibu",18,8,307,130,3504,12,70,1
"buick skylark 320",15,8,350,165,3693,11.5,70,1
"plymouth satellite",18,8,318,150,3436,11,70,1

Answer 1

这是问题 1 的部分解决方案（重要）

d3.text("https://gist.githubusercontent.com/ndarville/7075823/raw/415c00487a86fe6b85e667ece35160b8d8ad7efb/data.csv", function(
  data
) {

  
  var parsedCSV = d3.csv.parseRows(data);
  var headers = [parsedCSV.shift()]
  
  var table = d3.select("body")
    .append("table")
  var thead = table.append("thead")
  var tbody = table.append("tbody")
  var tfoot = table.append("tfoot")
    
  thead.selectAll("tr")
    .data(headers).enter()
    .append("tr")
    .selectAll("th")
    .data(d => d).enter()
    .append("th")
    .text(d => d)

  tbody.selectAll("tr")
    .data(parsedCSV).enter()
    .append("tr")
    .selectAll("td")
    .data(d => d).enter()
    .append("td")
    .text(d => d)
});

table {
  border-collapse: collapse;
  border: 2px black solid;
  font: 12px sans-serif;
}
td,th {
  border: 1px black solid;
  padding: 5px;
}

th {
  background-color: black;
  color: white;
  border-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.8/d3.min.js"></script>

这里是平均解决方案

console.clear()

d3.text("https://gist.githubusercontent.com/ndarville/7075823/raw/415c00487a86fe6b85e667ece35160b8d8ad7efb/data.csv", function(
  data
) {

  
  var parsedCSV = d3.csv.parseRows(data);
  var headers = [parsedCSV.shift()]
  
  var table = d3.select("body")
    .append("table")
  var thead = table.append("thead")
  var tbody = table.append("tbody")
  var tfoot = table.append("tfoot")
  
  var results = []
  
  var sums = [parsedCSV.reduce((accu, item, index, source) => {
    item.reduce((accu1, item1, index1, source1) => {
      if (isNaN(item1)) {
        accu1[index1] = 'Average'
      } else {
        accu1[index1] = accu1[index1] ? accu1[index1] + parseFloat(item1) : parseFloat(item1)        
      }
      return accu1
    }, accu)
    return accu
  }, [])]
  
  thead.selectAll("tr")
    .data(headers).enter()
    .append("tr")
    .selectAll("th")
    .data(d => d).enter()
    .append("th")
    .text(d => d)

  tbody.selectAll("tr")
    .data(parsedCSV).enter()
    .append("tr")
    .selectAll("td")
    .data(d => d).enter()
    .append("td")
    .text(d => d)

  tfoot.selectAll("tr")
    .data(sums).enter()
    .append("tr")
    .selectAll("td")
    .data(d => d).enter()
    .append("td")
    .text(d => 
      isNaN(d) ? d : Math.round((d / parsedCSV.length) * 100) / 100
    )
});

table {
  border-collapse: collapse;
  border: 2px black solid;
  font: 12px sans-serif;
}
td,th {
  border: 1px black solid;
  padding: 5px;
}

th {
  background-color: black;
  color: white;
  border-color: white;
}
tfoot {
  border-top: 3px double black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.8/d3.min.js"></script>