影响 d3.js 中多个单独图表的交互？

Question

我正在尝试在 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();

Answer 1

独立于用于创建它们的代码来链接这两个图的一种方法是将 ID 或类分配给您可能想要选择的元素。也就是说，如果图 2 有一个 ID 为 foo 的元素，那么在图 1 的元素的鼠标处理程序中，您可以说 d3.select("#foo").style("stroke", "red") 例如。类也是如此。

这种方法允许您将代码完全分开。此外，如果您使用类，您可以将相同的类分配给您想要一起突出显示的事物（例如，表示相同数据的元素）。然后d3.selectAll(".class") 将选择并允许您操作所有这些。这适用于任意数量的图表，而不仅仅是两个 - 改变的只是将选择的元素数量。