d3.js Perbarui domain waktu berdasarkan pilihan kuas

Saya mencoba memperbarui domain waktu (sumbu x) dari diagram garis berdasarkan koordinat "sikat" pada grafik sekunder.

kode biola di sini - https://jsfiddle.net/6xpcxvwj/7/

var brush = d3.brushX()
        .extent([[0, 0], [navWidth, navHeight]])
        .on("end", function () {

            xScale.domain(brush.extent());
            console.log("domain modified");

            svg.select("._x_axis").call(xAxis);
            console.log("x axis modified");

            svg.select("._line").attr("d", line);
            console.log("line modified");
        });

Karena ada yang salah pada kode di atas (yang ada di akhir halaman biola) yaitu pada saat mengupdate (menggerakan kuas) grafik utama akan menghilangkan sumbu x dan diagram garis.

Kode ini didasarkan pada https://bl.ocks.org/mbostock/1667367, namun dengan perbedaan besar bahwa kumpulan data saya adalah array, sedangkan pada contohnya adalah file csv.


javascript d3.js linechart
person kramasundar    schedule 19.08.2016    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Dalam d3 versi 4, d3.extent tidak lagi berfungsi dengan cara yang sama (Anda tidak dapat menggunakannya untuk mendapatkan tingkat sikat). Sebaliknya fungsi ini telah diabstraksi menjadi d3.event.selection. Jadi cobalah:

var s = d3.event.selection;
xScale.domain([navXScale.invert(s[0]), navXScale.invert(s[1])]);

Setelah memperbaikinya, Anda juga perlu memasukkan jalur klip ke dalam plot Anda.

biola diperbarui.

person Mark    schedule 19.08.2016