Как получить динамический доступ к D3. js обещание. Все используют событие onclick страницы - PullRequest
Новая
       11

Как получить динамический доступ к D3. js обещание. Все используют событие onclick страницы

1 голос
/ 03 мая 2020

Как можно отменить «извлечение данных» и «использование данных» при использовании D3. js promise.all?

Например, если я получаю два CSV-файла, используя D3. js promise.all как показано ниже, я могу успешно получить доступ к данным в области действия then(function(data) { 

var file1 = "file1.csv"
var file2 = "file2.csv"

Promise.all([
    d3.csv(file1),
    d3.csv(file2)
]).then(function(data) {
    var file1 = data[0];
    var file2 = data[1];

    // I can then use data in var file1 and file 2 in charts etc

});

Однако я бы хотел отделить «извлечение данных» и «использование данных», поэтому у меня нет извлекать все файлы данных, когда я хочу динамически изменить способ использования данных.

Например, скажем, у меня есть диаграмма, в настоящее время находящаяся в области действия then(function(data) {, и я хочу динамически изменить, какой из двух promise наборы данных, которые он использует.

Как я могу просто ссылаться на данные promise как функцию или объект из другой функции, которая не входит в ее область действия?

Что-то вроде наличия двух кнопок для динамического изменения данных диаграммы из файла1 к файлу 2, который будет ссылаться на promise данные как объекты. 

<html>
<body>

    <input type="button" onclick="getfile2();" value="file1">​

    <input type="button" onclick="getfile2();" value="file2">

    <script src="d3data.js"></script>

    <div id="mychart"></div>

</body>
</html>

1 Ответ

1 голос
/ 03 мая 2020

HTML файл, указанный вами с небольшим изменением вызова функции: 

<html>
<body>
    <input type="button" onclick="renderData(0);" value="file1">​
    <input type="button" onclick="renderData(1);" value="file2">
    <script src="d3data.js"></script>
    <div id="mychart"></div>
</body>
</html>

d3data. js файл должен выглядеть следующим образом: 

var file1 = "file1.csv";
var file2 = "file2.csv";

var fileData = null;

function renderData(dataIndex) {

    //ignore click events until data is being loaded
    if(fileData == null) {
        return;
    }
    document.getElementById("mychart").data = fileData[dataIndex];
}

Promise.all([
    d3.csv(file1),
    d3.csv(file2)
]).then(function(data) {
    fileData = data;

    // then use data in charts etc
    // chart - want to dynamically change data source
    // from file1 to file2 and back using button onClick event
    // by default render first file, 0 index
    renderData(0);

});
...