2016-11-08 6 views
1

D3を使用してCSVファイルを解析してテーブルに変換しようとしています。教師のブラウザ(これはコードがオンラインであるので、他の人にも役立つ)で動作するため、コードは「機能する」ことが分かりました。同じコードを実行しようとすると、ブラウザに表がポップアップすることはありません。私はChromeとEdgeで試しました。私の先生はChromeで実行し、彼は彼のために働いた(彼はMacを持っていた、私はWindows 10を持っていた)。とにかく、なぜこれがうまくいかないのかという援助を探しています。これがうまくいかないと考えると、これ以外のExcelシートのデータを解析する手助けをすることができますか?D3を使用してCSVファイルを解析する

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <style> 
      table { 
       border-collapse: collapse; 
       border: 2px black solid; 
       font: 12px sans-serif; 
      } 

      td { 
       border: 1px black solid; 
       padding: 5px; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="https://d3js.org/d3.v4.min.js"></script> 
<!--  <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.csvParseRows(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> 

CSVファイル:

data.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 

私もちょうどJavaScriptファイルをローカルにインストールするためにコードを変更し、ローカルでの.jsファイルをダウンロードしようとしました、そしてそれはまだ動作しませんでした。だから2つのオプションのどちらも私のために働いていない。 サイト:d3js

編集:私はindex.htmlをウェブブラウザに開き、以下のようにコメントを更新しました。いつものように何もポップアップしないので、私はRight-Clicked: Inspectとタブがポップアップします。右上には、xに2が付いていることがわかりました。明らかに2つのエラーがあるようです。私はそれをクリックして、私は次のようだ:

XMLHttpRequest cannot load: file:///C:/Users/John/Desktop/table/data.csv Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Uncaught TypeError: Cannot read property 'length' of null

両方

+0

クロムにローカルファイルをロードすることは別の問題です。この問題はここに記載されています:http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-support-for-http-error-when-loading-a-local –

答えて

1

d3.v4.min.js:6に、私は他の人のブラウザで試したコードの同じネスとは一部にすることはできません。しかし、私はあなたが使用して、1つの変更を行ったことを信じd3.js V4よりもわずかに異なる名前空間がある

  <script src="https://d3js.org/d3.v4.min.js"></script> 

:d3v4使用して、あなたが使用する必要がありますが

​​

を:

d3.csvParseRows 

むしろより:

d3.csv.parseRows 

https://github.com/d3/d3/blob/master/CHANGES.mdから:

every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear, and d3.layout.treemap is now d3.treemap.

  • 私はその後、不正な形式のcsvファイルであるようにあなたのcsvファイルは、最初の行に「data.csv」というテキストが含まれていないと仮定しています。
+0

私は元の'.v3'と信じていた)それがうまくいかなかったので、私はサイトに行って、更新されたバージョンを見て' .v4'にスワップしました---とにかく、同じ.v4を保ち、それが動作するかどうかを確認するコード。ヘッドアップありがとう – Speakmore

+0

コードとcsvをコピーしてロードしたときに、「d3.csv.parseRowsは関数ではありません」というエラーが表示され、d3.csvParseRowsを使用する必要があるという結論をサポートしています。それを変更すると、コードはエラーなく実行されます。これが原因でない場合、私は困惑しています。 –

+0

私は1行を変更し、何も修正しませんでした。私は誰かが私を助けてくれるかもしれない何かを見つけました、今、メイントピックを編集するつもりです。実際に役立つかどうかわからないが、うまくいけば! – Speakmore

関連する問題