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

我正在尝试在d3.js中创建一个包含两个图表的数据可视化：平行轴图和水平色条图(我只是用这个名字组成,但是基本上是一系列彩色矩形).平行轴图中的每条线都与色条图中的一组矩形相关联.

现在,将鼠标悬停在给定的行上将突出显示该行,而将鼠标悬停在给定的矩形上将突出显示该组矩形.我的目标是在用户将鼠标悬停在任一图表上时,在相反的图表上突出显示关联的线或一组矩形.如果我用相同的函数生成两个图表,这似乎非常简单.但是,赋予每个图表自己的功能并以某种方式连接它们会更加整洁(并且更可重用).我尝试让每个图表内的mouseover函数都调用一个在较高级别定义的函数,该函数同时影响了两个图表,但这似乎对未被鼠标悬停的图表没有任何影响.由于我仍然不完全了解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();

解决方法:

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

这种方法使您可以将代码完全分开.此外,如果您使用类别,则可以将同一类别分配给要一起突出显示的内容(例如,表示相同数据的元素).然后d3.selectAll(“.class”)将选择并允许您操纵所有它们.这将适用于任意数量的图形,而不仅仅是两个图形-更改只是将要选择的元素数量.

标签：charts,d3-js,javascript
来源： https://codeday.me/bug/20191122/2058405.html