เส้นเมาส์โอเวอร์บนหลายแผนภูมิเมื่อโฮเวอร์บนแผนภูมิเดียวโดยใช้ D3

กรุณาแนะนำหากมีปัญหาในการทำความเข้าใจคำถาม เพื่อที่ฉันจะได้แก้ไขคำถามและให้ข้อมูลที่จำเป็นได้

ฉันต้องการแสดงเส้นและคำแนะนำเครื่องมือบนหลายแผนภูมิเมื่อฉันวางเมาส์เหนือแผนภูมิเดียว

ในแผนภูมิต่อไปนี้ ฉันสามารถรับเส้นบนแผนภูมิเดียว ฉันต้องการให้เส้นควรดำเนินต่อไปจนถึงแกน X และคำแนะนำเครื่องมือสำหรับค่าที่เน้นบนหลายแผนภูมิ

ต่อไปนี้คือ jsfiddle ที่ฉันใช้งานมาจนถึงตอนนี้

                            $(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')

                                                        });
                                                });

สแนปชอต


person hackwithharsha    schedule 15.08.2017    source แหล่งที่มา
comment
โปรดให้คำแนะนำเกี่ยวกับวิธีการแก้ไขปัญหา เพื่อที่ฉันจะได้เข้าใจ..   -  person hackwithharsha    schedule 15.08.2017
comment
โปรดใช้ช่องทำเครื่องหมายเพื่อแสดงกราฟ   -  person hackwithharsha    schedule 15.08.2017
comment
คุณต้องเผยแพร่กิจกรรมของคุณในรูปแบบ svg ทั้งหมดเพื่อให้บรรลุเป้าหมายนี้ คุณสามารถสร้างเมธอด setLinePosition บนแผนภูมิของคุณ ซึ่งจะให้ค่าแก่แผนภูมิอื่นๆ ของคุณในการโทรกลับ จากนั้นสำหรับแต่ละแผนภูมิ ให้ตั้งค่าตำแหน่งของเส้นตามค่าที่ได้รับ   -  person Hugues Stefanski    schedule 15.08.2017
comment
หากคุณไม่ว่าอะไร โปรดระบุโครงกระดูกโค้ดสำหรับ setLinePosition ได้ไหม   -  person hackwithharsha    schedule 15.08.2017


คำตอบ (1)


ฉันอัปเดต jsfiddle ของคุณเพื่อให้บางอย่างใช้งานได้ ฉันใช้ VSCode และเยื้องโค้ดใหม่ ฉันหวังว่ามันโอเคสำหรับคุณ สิ่งที่ฉันทำคือ:

  • สร้างผู้มอบหมายงานกิจกรรมในแผนภูมิ
  • การสร้างการติดต่อกลับในเหตุการณ์ผู้มอบหมายงาน
  • เลือกทุกบรรทัด
  • กำหนดตำแหน่งของพวกเขา

การโทรกลับมีลักษณะดังนี้:

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

ใช้งานได้ แต่ฉันไม่ชอบความจริงที่ว่าทุกอย่างถูกเลือกใหม่ทุกครั้ง ควรสมัครรับกิจกรรมได้โดยตรงเมื่อโทรไปที่ chart แต่ฉันไม่สามารถคาดเดาได้

person Hugues Stefanski    schedule 15.08.2017
comment
ขอบคุณ !! มีวิธีใดบ้างที่ฉันสามารถรวมทั้งสองบรรทัดเมื่อฉันวางเมาส์เหนือ และฉันต้องการแสดงค่า y เป็นคำแนะนำเครื่องมือหรือป้ายกำกับเมื่อวางเมาส์เหนือ - person hackwithharsha; 15.08.2017