У меня мало опыта построения диаграмм с помощью d3, но не общего веб-разработки. Я хочу создать пример сайта с диаграммами и решил использовать Ruby on Rails. У меня проблемы с работой библиотеки d3. Я полный новичок в Rails. это мои шаги
Использовал ./bin/importmap pin d3 --download
для получения локальной версии d3. Я вижу несколько файлов d3 в папке vendor/javascript. Это также создало ряд записей в importmap.rb, например. pin "d3" # @7.4.4
В файле application.js у меня есть: import "d3"
У меня есть тестовый js-файл под названием «диаграммы», и я ссылаюсь на него с помощью import "./charts"
в application.js.
Тестовый файл содержит
window.onload = function() {var svg = d3.select("#rankChart1")
.append("svg")
.attr("width", 1000)
.attr("height", 1000);
}
🤔 А знаете ли вы, что...
Фреймворк обеспечивает поддержку многоязычности и интернационализации (I18n).
С 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#установка