D3js EventListener и getElementByID null при извлечении данных из ползунка - PullRequest
0 голосов
/ 24 января 2019

Я создаю визуализацию D3.js с помощью ползунка.

Год ползунка отображается как h2, и я присвоил ему id ("vardatayear").

enter image description here

Поскольку я собираюсь передать этот год в строку пути к файлу, я использовал 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.

enter image description here

Моя цель - извлекать год в любое время, когда он изменяется в ползунке, и назначать это значение переменной, чтобы использовать ее для импорта другого файла (соответственно году).

Что мне не хватает? Любое руководство в этом процессе приветствуется.


импорт

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);
    });
...