Как агрегировать данные с помощью d3.js для гистограммы
Я пытался сделать гистограмму, где я представляю данные из набора данных, который имеет несколько вхождений лет. Я хочу показать год по оси X, а по оси Y показать количество вхождений каждого года. Я пробовал следующий код на Observable, но я не уверен, почему он не работает. Я попытался проверить другие S.O. сообщения, но не удалось.
О, я пробовал это раньше, он говорит, что слово пусть зарезервировано
какую версию d3.js вы используете?
Это должна быть последняя версия, так как я импортирую BarChart в Observable. Я импортирую как: import {BarChart} from "@d3/horizontal-bar-chart"
Вы пытались переместить строку импорта в начало кодов? первая линия. Может быть, он не объявлен первым и используется после!?
Observable принимает импорт независимо от того, где он находится
Затем попробуйте поместить «var» за пределы диаграммы.
Ssays: синтаксическая ошибка, неожиданный токен.
Переместите весь фиолетовый код за пределы графика
Я переместил его наружу, и он все равно выдает SyntaxError: неожиданное ключевое слово «var». Я не уверен, почему проблема с var или let
Проблема в том, что Barchart — это функция, которая принимает значения в качестве параметров! На вашем изображении код, выделенный фиолетовым цветом, находится не в том месте, переместитесь вверх, за пределы функции Barchart. Функция гистограммы допускает только параметры, а не даже коды.
Как упоминал @akicside: вы пытались объявить переменную внутри литерала объекта. Это недействительный код JavaScript. Литералы объектов допускают только пары ключ-значение, разделенные запятыми. Поместите выбранный код перед вашим звонком BarChart().
Здравствуйте, спасибо, что присоединились. Я только что обновил свой скриншот, чтобы вы, ребята, могли видеть. Это все еще вызывает у меня проблемы, я думаю, что сейчас это не так, но я не уверен, почему он говорит, что есть неожиданный токен. Я также попытался удалить ключевое слово var, но оно все равно не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Здесь возникает несколько проблем, которые в значительной степени связаны с тем, что вы работаете в блокноте Observable , а не в обычной среде Javascript. Я думаю, стоит хорошенько взглянуть на Learning Observable, чтобы убедиться, что вы понимаете основы.
В частности, вы не можете ввести:
let x = 1
let y = 2
в единую ячейку. Фактически это то, что вы пытаетесь сделать в своей основной ячейке, определяющей диаграмму, и получаете синтаксическую ошибку. Вместо этого вы можете ввести:
x = 1
в одну ячейку, а затем
y = 2
в другую ячейку. Затем вы можете ссылаться на эти значения в других ячейках.
Вы также можете комбинировать такие вещи, как:
x_plus_y = {
let x = 1;
let y = 2;
return x+y;
}
Затем значение x_plus_y будет доступно для использования в других ячейках.
Теперь, я полагаю, вы пытаетесь создать подсчет по годам миссий космонавтов, используя https://think.cs.vt.edu/corgis/csv/astronauts/.
Если это так, в этой записной книжке Observable показано несколько способов сделать это.
Наконец, я считаю ошибкой использовать компонент BarChart так, как вы пытаетесь это сделать. Этот компонент был скорее экспериментальной ступенькой к их более полной библиотеке построения графиков более высокого уровня под названием Observable Plot. Я думаю, что с сюжетом гораздо проще добиться того, чего вы хотите, и у вас больше контроля. Также легко использовать Plot в ванильной среде, например:
let div = d3.select('#plot')
fetch(
"https://think.cs.vt.edu/corgis/datasets/csv/astronauts/astronauts.csv"
).then(async function (r) {
let astronauts = d3.csvParse(await r.text(), d3.autoType);
div.append(() => Plot.plot({
y: {
grid: true
},
x: { tickFormat: (y) => (y % 10 == 0 ? d3.format('d')(y) : "") },
marks: [
Plot.barY(astronauts, Plot.groupX({ y: "count" }, { x: "Mission.Year" })),
Plot.ruleY([0])
]
}))
});<script src = "https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src = "https://cdn.jsdelivr.net/npm/@observablehq/[email protected]"></script>
<div id = "plot"></div>Большое спасибо за ваши рекомендации и предложения, доктор МакКлюр :)
Попробуйте "let" вместо "var"