"Uncaught ReferenceError" 来自 d3，在 Ruby 上使用 importmaps 在 Rails

Question

我没有使用 d3 构建图表的经验，但对一般的 web 开发没有经验。我想构建一个图表示例站点并选择在 Rails 上使用 Ruby。我无法让 d3 库正常工作。我是 Rails 的新手。这是我的步骤

使用./bin/importmap pin d3 --download获得本地版本的d3。我可以在 vendor/javascript 文件夹下看到许多 d3 文件。这也在 importmap.rb 中创造了一些记录，例如pin "d3" # @7.4.4
在 application.js 文件中我有：import "d3"
我有一个名为“图表”的测试 js 文件，并在 application.js
中用 import "./charts" 引用了它
测试文件包含

window.onload = function() {var svg = d3.select("#rankChart1")
                .append("svg")
                .attr("width", 1000)
                .attr("height", 1000);
                }

失败并显示“Uncaught ReferenceError: d3 is not defined。我可以在浏览器的 Assets 文件夹下看到许多 d3 文件，所以不确定为什么它不起作用。

Answer 1

使用 importmaps d3 不会全局导出，这就是您收到错误的原因。

引脚 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 只是全局的旧行为。将此 pin 手动添加到 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

"Uncaught ReferenceError" 来自 d3，在 Ruby 上使用 importmaps 在 Rails

"Uncaught ReferenceError" from d3 with importmaps on Ruby On Rails

ruby-on-rails

d3.js