2016-12-14 110 views
0

如果这是基本但我是D3的新手道歉。我无法导入我的CSV数据并将其显示为可在浏览器中打开的表格。我所有的数据文件和代码都位于同一个文件夹中。这是我迄今为止的代码和我的csv数据。任何意见是极大的赞赏!无法使用D3将我的CSV数据导入到表中

SublimeFile.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
     <title>Dashboard</title> 
     <link rel="stylesheet" href="normalize.css"> 
     <style> 
      table { 
       border-collapse: collapse; 
       border: 2px grey solid; 
       font: 12px sans-serif; 
      } 

      td { 
       border: 1px grey solid; 
       padding: 5px; 
      } 

      body { 
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
      margin-left:40px; 
      font-weight: 200; 
      font-size: 16px; 
      } 

      h1 {font-weight: 400;} 

      p {font-size: 12px;} 

      text {font-size: 12px;} 
     </style>   
    </head> 
    <body> 
    <div id = "Chart"></div> 
     <script> 
      d3.text("dashboard.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> 
    </body> 
</html> 

dashboard.csv

Entity,Entity A 
Head of Data,Albert Aldridge 
DG Lead,Anna Annovo 
BIO,April Autumn 
Business Participants,"Alfred, Adeline, Amy" 
Scope,European Platforms 
Scope Trend,Steady 
+0

我试过你的代码,它适用于我(用你的csv),如果你无法让代码工作,你如何测试它? –

+0

也许你没有使用Web服务器来执行页面。如果是这种情况,您可能会遇到错误“仅针对HTTP支持跨源请求”。您可以使用轻量级Web服务器,如[http-server](https://www.npmjs.com/package/http-server)。 – LeoGC

回答

0

感谢你的努力,我能弄明白。我试图运行Chrome浏览器的Chrome浏览器中的.html文件,但没有运气。它似乎只适用于我的Firefox。

相关问题