Garis Arahkan Mouse pada beberapa grafik saat mengarahkan kursor pada satu grafik menggunakan D3

Mohon saran Jika ada kesulitan dalam memahami pertanyaan. sehingga saya dapat mengedit pertanyaan dan memberikan informasi yang diperlukan.

Saya ingin menampilkan Garis dan keterangan alat pada beberapa bagan ketika saya mengarahkan kursor pada satu bagan.

Pada bagan berikut, saya bisa mendapatkan garis pada satu bagan, saya ingin garis tersebut terus berlanjut hingga sumbu X dan juga keterangan alat untuk nilai yang disorot pada beberapa bagan.

Berikut ini adalah jsfiddle yang telah saya kerjakan hingga saat ini.

                            $(window).load(function () {
                                                   var textareas$ = $('#chartarea g');
                                                        textareas$.hide();
                        
                        $('input[name="Air"]').change(function () {
                                                    var elem$ = $(this);
                                                    var correspelem$ = textareas$.eq(elem$.val() - 1);
                                                        
                                                        if (elem$.val() == 1) {
                                                                                select('Retail', "#Retail");
                                                                } else if (elem$.val() == 2) {
                                                                                select("Gas", "#Gas");
                                                                } else if (elem$.val() == 3) {
                                                                                select("Dining", "#Dining");
                                                                } else {};
                                                                if (elem$.is(':checked')) correspelem$.show();
                                                                else correspelem$.hide();

                                                               var lastSelectedChartIndex;
                var chartAxis = document.querySelectorAll('#chartarea  .axis.x');
                
                var selectedCharts = document.querySelectorAll('#options input').forEach((elem, index) => {
                if (elem.checked) {
                	lastSelectedChartIndex = index;
                }
                });
                
                //console.log(lastSelectedChartIndex)
                
                chartAxis
                	.forEach((elem, index) => (index !== chartAxis.length - 1) && !(index == lastSelectedChartIndex) ? elem.style.display = 'none' : elem.style.display = 'block')

                                                        });
                                                });

Foto


javascript jquery charts d3.js
person hackwithharsha    schedule 15.08.2017    source sumber
comment
Harap berikan petunjuk tentang cara mendekati masalah tersebut. agar aku bisa mengetahuinya..   -  person hackwithharsha    schedule 15.08.2017
comment
Silakan gunakan kotak centang untuk menampilkan grafik   -  person hackwithharsha    schedule 15.08.2017
comment
Anda perlu menyebarkan acara Anda di semua svg untuk mencapai hal ini. Anda dapat membuat metode setLinePosition pada bagan Anda, yang akan memberikan nilai ke bagan Anda yang lain dalam panggilan balik, lalu untuk setiap bagan atur posisi garis sesuai dengan nilai yang diterima   -  person Hugues Stefanski    schedule 15.08.2017
comment
Jika Anda tidak keberatan, bisakah Anda memberikan kerangka kode untuk setLinePosition,   -  person hackwithharsha    schedule 15.08.2017

Jawaban (1)


arrow_upward
1
arrow_downward

Saya memperbarui jsfiddle Anda agar sesuatu berfungsi. Saya menggunakan VSCode dan memasukkan kembali kodenya, saya harap ini baik-baik saja untuk Anda. Apa yang saya lakukan adalah:

  • Buat operator acara di bagan
  • Membuat panggilan balik pada acara operator
  • Pilih semua baris
  • Tetapkan posisi mereka

Panggilan baliknya terlihat seperti ini:

chart.onHover(function (x) {
    console.log(x);
    d3.selectAll('.hover-line')
        .select('line')
        .attr('x1', x)
        .attr('x2', x)
        .style('opacity', 1)
})

Ini berhasil, tetapi saya tidak menyukai kenyataan bahwa semuanya dipilih ulang setiap saat. Seharusnya saya bisa berlangganan acara tersebut secara langsung saat menelepon chart, tapi saya tidak bisa memikirkannya.

person Hugues Stefanski    schedule 15.08.2017
comment
Terima kasih !! Apakah ada cara agar saya bisa menggabungkan kedua baris saat saya mengarahkan mouse, dan saya juga ingin menampilkan nilai y sebagai tooltip atau label saat mengarahkan kursor. - person hackwithharsha; 15.08.2017