我幾乎沒有使用 d3 構建圖表的經驗，但不是一般的 Web 開發人員。我想建立一個圖表示例網站并選擇使用 Ruby on Rails。我無法讓 d3 庫正常作業。我是 Rails 的新手。這是我的步驟
用于
./bin/importmap pin d3 --download獲取 d3 的本地版本。我可以在 vendor/javascript 檔案夾下看到許多 d3 檔案。這也在 importmap.rb 中創建了許多記錄，例如pin "d3" # @7.4.4在 application.js 檔案中，我有：
import "d3"我有一個名為“charts”的測驗 js 檔案，并
import "./charts"在 application.js 中參考它測驗檔案包含
window.onload = function() {var svg = d3.select("#rankChart1")
.append("svg")
.attr("width", 1000)
.attr("height", 1000);
}- 這失敗了“未捕獲的參考錯誤：d3 未定義。我可以在瀏覽器的 Assets 檔案夾下看到許多 d3 檔案，所以不確定它為什么不起作用。
uj5u.com熱心網友回復：
使用 importmapsd3不會全域匯出，這就是您收到錯誤的原因。
引腳d3：
$ bin/importmap pin d3
添加了很多引腳。您可以使用所有這些：
import * as d3 from "d3"; // NOTE: every d3 module is loaded
或者只是選擇更快的加載時間：
import {zip} from "d3-array"; // NOTE: from `name` has to match the pin `name`
或制作自定義 d3 物件：
const d3 = await Promise.all([
import("d3-array"),
import("d3-axis"),
]).then(d3 => Object.assign({}, ...d3));
如果你想要舊的行為d3只是全域的。將此引腳手動添加到config/importmap.rb檔案：
pin 'd3', to: 'https://cdn.jsdelivr.net/npm/d3@7'
然后只匯入它：
// app/javascript/application.js
import "d3";
import "./chart"; // import after d3
console.log(d3); // d3 is already global and can be used anywhere.
// app/javascript/chart.js
console.log(d3.select); // d3 is loaded correctly
更多選項：https ://github.com/d3/d3#installing
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/474450.html
上一篇：如何在條形圖上繪制x軸值？
下一篇：轉換兩組元素不起作用