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")将选择并允许您操纵所有这些。这适用于任意数量的图形，而不仅仅是两个 - 更改只是将要选择的元素数量。

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

1 个答案: