я пытаюсь создать визуализацию данных в d3.js, которая содержит две диаграммы: график параллельной оси и горизонтальную диаграмму цветовой шкалы (я только что составил это имя, но этов основном это серия цветных прямоугольников). Каждая линия на графике параллельной оси связана с набором прямоугольников на диаграмме цветовой шкалы.

Прямо сейчас, наведение курсора на заданную линию выделяет эту линию, а наведение курсора на заданный прямоугольник выделяет этот набор прямоугольников. Моя цель также состоит в том, чтобы выделять связанную линию или набор прямоугольников на противоположной диаграмме в любое время, когда пользователь наводит мышью на любой диаграмме. Кажется, это было бы довольно просто, если бы я генерировал обе диаграммы с одной и той же функцией. Тем не менее, было бы гораздо аккуратнее (и более многократно) стиль кодирования, чтобы дать каждой диаграмме свою собственную функцию и просто как-то их соединить. Я пытался, чтобы каждая функция наведения мыши внутри диаграммы вызывала функцию, определенную на более высоком уровне, которая влияла на обе диаграммы, но это некажется, не имеет никакого влияния на график, который не былт Так как я до сих пор нея не совсем понимаю, как работает d3.js на базовом уровне, яМне бы очень хотелось получить подтверждение того, что это жизнеспособный способ настроить мой код. Мой код длинный и сложный, и я просто хочу получить совет по структуре, поэтому вот основная схема:

function chart1(){
    make chart
    function mouseover(d,i){
         do stuff
         chart1_globalmouseover(d,i);
    }
    chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}

function chart2(){
    make chart
    function mouseover(d,i){
         do stuff
         chart2_globalmouseover(d,i);
    }
    chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}

function chart1_globalmouseover(d,i){
    do stuff in chart 2's mouseover function
}

function chart2_globalmouseover(d,i){
    do stuff in chart 1's mouseover function
}

c1 = chart1();
c2 = chart2();