在 Ruby On Rails 上使用 importmaps 来自 d3 的“未捕获引用错误”

Question

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

1. 使用

   ./bin/importmap pin d3 --download

   获取 d3 的本地版本。我可以在vendor/javascript文件夹下看到许多d3文件。这也在 importmap.rb 中创建了许多记录，例如

   pin "d3" # @7.4.4

2. 在 application.js 文件中我有：

   import  "d3"

3. 我有一个名为“charts”的测试js文件，并在application.js中用

   import "./charts"

   引用它

4. 测试文件包含

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

5. 此操作失败，并显示“未捕获的引用错误：d3未定义。我可以在浏览器的资产文件夹下看到许多 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

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