javascript - 影响 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(例如“中风”、“红色”)。类也是如此。

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