Estou tentando criar uma visualização de dados no d3.js. que contém dois gráficos: um gráfico de eixo paralelo e um gráfico de barras de cores horizontal (acabei de criar esse nome, mas é basicamente uma série de retângulos coloridos). Cada linha no gráfico do eixo paralelo está associada a um conjunto de retângulos no gráfico da barra de cores.

No momento, passar o mouse sobre uma determinada linha destaca essa linha e passar o mouse sobre um determinado retângulo destaca esse conjunto de retângulos. Meu objetivo é também destacar a linha ou o conjunto de retângulos associado no gráfico oposto a qualquer momento que o usuário passar o mouse sobre o gráfico. Parece que seria bem direto se eu gerasse os dois gráficos com a mesma função. No entanto, seria um estilo de codificação muito mais limpo (e mais reutilizável) para dar a cada gráfico sua própria função e apenas conectá-los de alguma forma. Tentei fazer com que cada função de mouseover dentro do gráfico chamasse uma função definida em um nível mais alto que afetasse os dois gráficos, mas isso não pareceu ter nenhum efeito no gráfico que não foi colocado sobre o mouse. Como ainda não entendo perfeitamente como o d3.js funciona em um nível subjacente, eu realmente gostaria de ter a confirmação de que essa é uma maneira viável de configurar meu código. Meu código é longo e complicado, e eu realmente só quero conselhos sobre a estrutura, então aqui está o esboço básico:

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();