«Uncaught ReferenceError» из d3 с importmaps на Ruby On Rails

У меня мало опыта построения диаграмм с помощью d3, но не общего веб-разработки. Я хочу создать пример сайта с диаграммами и решил использовать Ruby on Rails. У меня проблемы с работой библиотеки d3. Я полный новичок в Rails. это мои шаги

  1. Использовал ./bin/importmap pin d3 --download для получения локальной версии d3. Я вижу несколько файлов d3 в папке vendor/javascript. Это также создало ряд записей в importmap.rb, например. pin "d3" # @7.4.4

  2. В файле application.js у меня есть: import "d3"

  3. У меня есть тестовый js-файл под названием «диаграммы», и я ссылаюсь на него с помощью import "./charts" в application.js.

  4. Тестовый файл содержит

window.onload = function() {var svg = d3.select("#rankChart1")
                .append("svg")
                .attr("width", 1000)
                .attr("height", 1000);
                }
  1. Это не удается с «Uncaught ReferenceError: d3 не определено. Я вижу несколько файлов d3 в папке «Активы» в браузере, поэтому не знаю, почему это не работает.

🤔 А знаете ли вы, что...
Фреймворк обеспечивает поддержку многоязычности и интернационализации (I18n).


1
43
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.info(d3); // d3 is already global and can be used anywhere.
// app/javascript/chart.js

console.info(d3.select); // d3 is loaded correctly

Дополнительные параметры: https://github.com/d3/d3#установка