Bagaimana saya bisa memisahkan 'mengambil data' dan 'menggunakan data' saat menggunakan D3.js promise.all?

Misalnya, jika saya mendapatkan dua file csv menggunakan D3.js promise.all seperti yang ditunjukkan di bawah ini, saya berhasil mengakses data di dalam lingkup 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

});

Namun, saya ingin memisahkan 'pengambilan data' dan 'menggunakan data', jadi saya tidak harus mengambil semua file data ketika saya ingin mengubah cara saya menggunakan data secara dinamis.

Misalnya, saya memiliki bagan yang saat ini berada di dalam cakupan then(function(data) { dan saya ingin secara dinamis mengubah yang mana dari dua kumpulan data promise yang digunakannya.

Bagaimana saya bisa merujuk ke data promise sebagai fungsi atau objek dari fungsi lain yang tidak berada dalam cakupannya?

Sesuatu seperti memiliki dua tombol untuk mengubah data bagan secara dinamis dari file1 ke file2 yang akan merujuk ke data promise sebagai objek.

<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
curtisp 3 Mei 2020, 19:07

1 menjawab

Jawaban Terbaik

File HTML seperti yang Anda berikan dengan sedikit perubahan panggilan fungsi:

<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>

File d3data.js akan terlihat seperti:

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

});
1
Hamza Arshad 3 Mei 2020, 18:05