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