Я создаю визуализацию D3.js с помощью ползунка.
Год ползунка отображается как h2
, и я присвоил ему id
("vardatayear").
Поскольку я собираюсь передать этот год в строку пути к файлу, я использовал getElementById с innerHTML (см. Импорт внизу):
var honeyyear = document.getElementById("vardatayear").innerHTML;
if(!honeyyear){
honeyyear = 2013
}
Это возвращает 2013, но когда закомментировано if, он возвращает "ноль".
Я пытался найти другие способы получения изменений в ползунке, и я добавил EventListener:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World!";
});
update(honeyyear);
С EventListener я получаю следующую ошибку:
Uncaught TypeError: Невозможно установить свойство 'innerHTML' для null
на HTMLDocument. (App.js: 131)
Это означает, что honeyyear имеет значение null, хотя я вижу изменения в консоли и в HTML.
Моя цель - извлекать год в любое время, когда он изменяется в ползунке, и назначать это значение переменной, чтобы использовать ее для импорта другого файла (соответственно году).
Что мне не хватает? Любое руководство в этом процессе приветствуется.
импорт
d3.json( `data/HoneyProduction-${honeyyear}.json` , function( honey_data ){
Слайдер
// Slider
function update(year){
slider.property("value", year);
d3.select(".year").text(year);
};
var slider = d3.select(".slider")
.append("input")
.attr("type", "range")
.attr("min", 2009)
.attr("max", 2013)
.attr("step", 1)
.on("input", function() {
var year = this.value;
update(year);
});