Линия при наведении курсора на несколько графиков при наведении курсора на один график с помощью 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')

                                                        });
                                                });

Снимок


javascript jquery charts d3.js
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)


arrow_upward
1
arrow_downward

Я сообщил вам 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