我想從谷歌表生成一個 D3.js 樹。
在我遵循的示例中，樹是使用 csv 生成的。因此，我使用應用程式腳本在我的谷歌驅動器上從谷歌表格生成了一個 csv 檔案，現在，我嘗試像這個例子一樣加載它：
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_hierarchy_1level.csv', function(data) {console.log(data)})
</script>
在這里它作業正常但是當我嘗試從谷歌驅動器加載我自己的 csv 時，我有這個代碼：
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3.csv('https://drive.google.com/uc?id=1S9_KA87o_i7PjHILicXX21mlVeQc1jIA', function(data) {console.log(data)})
</script>
以下錯誤訊息：
從源“https://n-mvggraccraz7qqhyhidnzi7cecuqlcodyfxsjjq-0lu-script.googleusercontent.com”訪問“https://drive.google.com/uc?id=1S9_KA87o_i7PjHILicXX21mlVeQc1jIA”的 XMLHttpRequest 已被 CORS 策略阻止：無“訪問” -Control-Allow-Origin' 標頭存在于請求的資源上。
VM1794 d3.v4.js:11472 獲取https://drive.google.com/uc?id=1S9_KA87o_i7PjHILicXX21mlVeQc1jIA net::ERR_FAILED 303
我檢查了 2 個檔案。他們似乎是一樣的。我看不到錯誤在哪里。你能解釋一下如何像使用任何帶有 URL 的檔案一樣使用驅動器中的檔案嗎？
uj5u.com熱心網友回復：
在當前階段，似乎在使用 webContentLink like 的端點時https://drive.google.com/uc?id=###&export=download，會出現錯誤 like has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.。為了避免這種情況，以下模式怎么樣？
模式一：
在此模式中，使用 API 密鑰。使用 API 密鑰時，可以消除此問題。您可以在此處查看如何檢索 API 密鑰。在您的 URL 中，它變為如下。
https://www.googleapis.com/drive/v3/files/{fileId}?alt=media&key={APIkey}
使用此 URL 時，它變為以下腳本。
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3.csv('https://www.googleapis.com/drive/v3/files/{fileId}?alt=media&key={APIkey}', function(data) {console.log(data)})
</script>
模式二：
在此模式中，不使用 API 密鑰。當我看到你的問題時，我注意到了In the exemple I followed, the tree is generated with a csv. So, I have generated with apps script a csv file on my google drive from a google sheet and now。由此，我了解到您想使用從電子表格檢索到的 CSV 資料。如果我的理解是正確的，我認為您的目標可以直接使用電子表格來實作。其流程如下。
- 將電子表格發布為網頁。參考
- 這樣，您可以檢索 URL，如
https://docs.google.com/spreadsheets/d/e/2PACX-###/pubhtml.
- 這樣，您可以檢索 URL，如
- 修改網址。
請將上面檢索到的 URL 修改如下。
https://docs.google.com/spreadsheets/d/e/2PACX-###/pub?output=csv在此 URL 中，使用了電子表格的第一張表。例如，當您想使用其他作業表時，請使用作業表 ID 進行如下修改。
https://docs.google.com/spreadsheets/d/e/2PACX-###/pub?output=csv&gid={sheetId}
當此 URL 用于您的腳本時，它變為如下。
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-###/pub?output=csv', function(data) {console.log(data)})
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/489917.html
標籤：CSV 谷歌应用脚本 d3.js 谷歌驱动API 科尔斯